javascript - 使用隐藏和显示自动更新jquery中的多个下拉菜单

Question

我有三个下拉菜单，但最初只有一个下拉菜单可见。在第一个下拉列表中选择一个值时，第二个下拉列表将可见。同样，如果我们为第二个下拉菜单选择一个值，那么第三个下拉菜单将可见

每当我重置上一个下拉列表的值时，我希望下一个下拉列表重置为-- 请选择 --（目前没有发生）

例如（我需要这个输出）：

drop-down 1 
    -- please select --
    option 1.1
    option 1.2
drop-down 2
    -- please select --
    option 2.1 (1.1)
    option 2.2 (1.1)
    option 2.3 (1.1)

    option 2.4 (1.2)
    option 2.5 (1.2)
    option 2.6 (1.2)
    option 2.7 (1.2)

drop-down 3
    -- please select --
    option 3.1 (2.1)
    option 3.2 (2.1)
    option 3.3 (2.1)

    option 3.4 (2.2)
    option 3.5 (2.2)

    option 3.6 (2.3)
    option 3.7 (2.3)

    option 3.8 (2.4)

    option 3.9 (2.5)

    option 3.10 (2.7)
    option 3.11 (2.7)
    option 3.12 (2.7)
    option 3.13 (2.7)
    option 3.14 (2.7)

这是html，它略有不同

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<label>Dropdown 1</label>
<select name="select1" id="fe296151">
  <option value="" selected="selected" disabled="disabled">Please select</option>
  <option id="main1" value="aaaa-1">aaaa-1</option>
  <option id="main2" value="bbbb-1">bbbb-1</option>
  <option id="" value="cccc-1">cccc-1</option>
</select>
<div id="divselect2">
  <label>Dropdown 2</label>
  <select name="select2" id="fe296152">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="sub1" class="main1" value="aaaa-1-2.a">aaaa-1-2.a</option>
    <option id="sub1" class="main1" value="aaaa-1-2.b">aaaa-1-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.a">bbbb-2.a</option>
    <option id="sub2" class="main2" value="bbbb-2.b">bbbb-2.b</option>
    <option id="sub2" class="main2" value="bbbb-2.c">bbbb-2.c</option>
  </select>
</div>
<div id="divselect3">
  <label>Dropdown 3</label>
  <select name="select3" id="fe296154">
    <option value="" selected="selected" disabled="disabled">Please select</option>
    <option id="red1" class="sub2" value="aaaa-3.a">aaaa-3.a</option>
    <option id="" class="sub2" value="aaaa-3.b">aaaa-3.b</option>
    <option id="" class="sub2" value="bbbb-3.c">bbbb-3.c</option>
    <option id="" class="sub2" value="bbbb-3.d">bbbb-3.d</option>
  </select>
</div>
<div id="divselect3a">
  <label>input box</label>
  <input type="text" class="red1" value="" />
</div>
<script type="text/javascript">
$(document).ready(function(){
  $("#divselect2").hide(); 
  $("#divselect3").hide();
  $("#divselect3a").hide();  
 });
$("#fe296151").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#fe296152 option').clone());
  }
   var fe296151 = $("#fe296151").find(':selected').attr('id');
  if(fe296151) {
    $('#divselect2').show();  
  }
  else {
    $('#divselect2, #divselect3, #divselect3a, #divselect4').hide();  
    }
    var options = $(this).data('options').filter('.'+fe296151);
  $('#fe296152').html(options);   
});
$("#fe296152").change(function() {
  if ($(this).data('options') === undefined) {
    $(this).data('options', $('#fe296154 option').clone());
  }
  var select2 = $("#fe296152").find(':selected').attr('id');
  if(select2) {
    $('#divselect3').show();  
  }
  else {
    $('#divselect3, #divselect3a, #divselect4').hide();  
    }
var options = $(this).data('options').filter('.'+fe296152);
  $('#fe296154').html(options);
});
$("#fe296154").change(function() {
 
  var select3 = $("#fe296154").find(':selected').attr('id');
  if(select3) {
    $('#divselect3a').show();  
  }
  else {
    $('#divselect3a').hide();  
    }
});
</script>

标签： javascriptjqueryselectdropdownshow-hide

Answer 1

谢谢您的帮助！在这里，我想要一个一个隐藏/显示下拉列表的 optput

下拉 1
    -  请选择  - 
    选项 1.1
    选项 1.2
下拉 2
    -  请选择  - 
    选项 2.1（如果我选择选项 1.1，我想显示此选项）
    选项 2.2（如果我选择选项 1.1，我想显示此选项）
    选项 2.3（如果我选择选项 1.1，我想显示此选项）

    选项 2.4（如果我选择选项 1.2，我想显示此选项）
    选项 2.5（如果我选择选项 1.2，我想显示此选项）
    选项 2.6（如果我选择选项 1.2，我想显示此选项）
    选项 2.7（如果我选择选项 1.2，我想显示此选项）

下拉 3
    -  请选择  - 
    选项 3.1（如果我选择选项 2.1，我想显示此选项）
    选项 3.2（如果我选择选项 2.1，我想显示此选项）
    选项 3.3（如果我选择选项 2.1，我想显示此选项）

    选项 3.4（如果我选择选项 2.2，我想显示此选项）
    选项 3.5（如果我选择选项 2.2，我想显示此选项）

    选项 3.6（如果我选择选项 2.3，我想显示此选项）
    选项 3.7（如果我选择选项 2.3，我想显示此选项）

    选项 3.8（如果我选择选项 2.4，我想显示此选项）

    选项 3.9（如果我选择选项 2.5，我想显示此选项）

    选项 3.10（如果我选择选项 2.7，我想显示此选项）
    选项 3.11（如果我选择选项 2.7，我想显示此选项）
    选项 3.12（如果我选择选项 2.7，我想显示此选项）
    选项 3.13（如果我选择选项 2.7，我想显示此选项）
    选项 3.14（如果我选择选项 2.7，我想显示此选项）

注意：我们没有下拉 3 的 (2.6) 子选项