有关下拉列表

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，只要标识符是唯一的。

我只包括前两个选项，但我想你会明白。