javascript - 与下拉列表选项相关的具体结果

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>

例如2

对于摩托选项:

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

div的数量意味着里面有多个代码，我只是匆忙这样做的。

Answer 1

如果我理解正确的话，您希望拥有一个包含一个选择字段的页面，以及许多预生成的 div，仅在选择特定选项时才显示这些 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添加一些有值(value)的内容，你有很多父div并不重要，只要标识符是唯一的即可。

我只包含了前两个选项，但我想您会明白的。