分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery显示/隐藏基于另一个下拉选项的下拉选项，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试创建一个下拉选择菜单,其中包含三个选择框,其中第三个框将根据在第一个选择框中选择的选项显示/隐藏特定选项. @H_675_2@我想知道这里是否有人能够提出解决方案.

@H_675_2@这是我所拥有的3个选择框的简化版本：

<SELEct class="product" id="SELEct_1" name="product">
  <option SELEcted="SELEcted" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</SELEct>

<SELEct class="color" id="SELEct_2" name="color">
  <option SELEcted="SELEcted" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</SELEct>

<SELEct class="size" id="SELEct_3" name="size">
  <option SELEcted="SELEcted" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</SELEct>

@H_675_2@通过上面的示例,我希望能够在第一个选择框中选择Mens Suits选项时从第三个选择框(36,38和40)查看前3个选项.类似地,当从第一个框中选择女性套装时,选项30,29和28应该在第3个框中可见.与儿童套装相同.

@H_675_2@我希望这是有道理的.谢谢.

解决方法

尝试：

var men = '<option SELEcted="SELEcted" value=""> Choose Size </option><option value="36">36</option><option value="38">38</option><option value="40">40</option>';
var women = '<option SELEcted="SELEcted" value=""> Choose Size </option><option value="30">30</option><option value="29">29</option><option value="28">28</option>';
var children = '<option SELEcted="SELEcted" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function(){
    $("SELEct#SELEct_1").on('change',function(){
        if($(this).val()=="Mens Suits"){
            $("SELEct#SELEct_3").html(men);
        }else if($(this).val()=="Womens Suit"){
            $("SELEct#SELEct_3").html(women);
        }else if($(this).val()=="Children Suit"){
            $("SELEct#SELEct_3").html(children);
        }
    });
});