有關下拉列表

Question

的選項的具體結果我有這樣的下拉列表：

<select name="asfalia" id="asfalia" class="validate['required'] arrow" style="height:24px;"> 
    <option id="none" selected="selected" value="">Επιλέξτε</option> 
    <option id="car" value="Αυτοκινήτου">Αυτοκινήτου</option> 
    <option id="moto" value="Μηχανής">Μηχανής</option> 
    <option id="house" value="Σπιτιού">Σπιτιού</option> 
    <option id="bussines" value="Επιχείρησης">Επιχείρησης</option> 
    <option id="boat" value="Σκάφους">Σκάφους</option> 
    <option id="life" value="Ζωής">Ζωής</option> 
    <option id="health" value="Υγείας">Υγείας</option> 
</select> 

我要的是，當有人選擇一個選項然後顯示與選項中的特定內容。

例如

汽車選項：

<div> 
    <div> 
     <div> 
      <div> 
       <div> 
        <div> 
         <div> 
          Car Content 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

e.g2

用於摩托選項：

<div> 
    <div> 
     <div> 
      <div> 
       <div> 
        <div> 
         <div> 
          Moto Content 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

的div的量意味着有內的多個代碼，我就這樣急着做。

Answer 1

如果我的理解正確，您希望有一個帶有一個選擇字段的頁面，以及許多隻在選擇特定選項時才顯示的預生成div。

如果是這樣的話，那麼這裏就是你要找的內容：

$(document).ready(function() { 
 
    $('#asfalia').on('change', function() { 
 
    var selectedID = $(this).children(":selected").attr("id"); 
 
    $("[id^=option-]").hide(); 
 
    if (selectedID != "") { 
 
     $("#option-" + selectedID).show(); 
 
    } 
 
    }); 
 
});

#container-options div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="asfalia" id="asfalia" class="validate['required'] arrow" style="height:24px;"> 
 
    <option id="none" selected="selected" value="">Επιλέξτε</option> 
 
    <option id="car" value="Αυτοκινήτου">Αυτοκινήτου</option> 
 
    <option id="moto" value="Μηχανής">Μηχανής</option> 
 
</select> 
 
<div> 
 
    <div> 
 
    <div id="container-options"> 
 
     <div id="option-car"> 
 
     Some content when car is selected 
 
     </div> 
 
     <div id="option-moto"> 
 
     Some content when moto is selected 
 
     </div> 
 
    </div> 
 
    </div>

，你所要做的就是增加一些有價值的內容對每個格，它不無論你有多少個父母div，只要標識符是唯一的。

我只包括前兩個選項，但我想你會明白。