如何解决使用隐藏和显示自动更新jQuery中的mulitple下拉列表vlues？三个下拉，但是最初只有下拉可见。
在第下拉中选择值时，第二个下拉将可见。同样，如果我们为第二个下拉选择值，则第三个下拉将可见
每当我重置上下拉的值时，我都希望将下下拉重置为-请选择-（当前未发生）
例如（我需要此）：
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" abled="abled">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" abled="abled">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" abled="abled">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 </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,#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>
解决方法 对于您的问题，我已删除所有不必要的部分。在您的逻辑中，您正在检查所选选项是否没有“ ID”属性，但是“选择”选项被禁用，您无法选择这些值。在我的版本中，我显示并重置了修改后的所有输入元素。
我希望这是您想要的结果。
$(document).ready(function() {
$("#divselect2").hide(); $("#divselect3").hide(); $("#divselect3a").hide();
$("#fe296151").change(function() { /* if ($(this).data('options') === undefined) { $(this).data('options',$('#fe296152 option').clone()); } */ $('#divselect2').show(); $('#divselect2 select,#divselect3 select,#divselect3a input[type="text"]').val(""); $('#divselect3,#divselect3a').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()); } */ $('#divselect3').show(); $('#divselect3 select,#divselect3a input[type="text"]').val(""); $('#divselect3a').hide(); /* var options = $(this).data('options').filter('.' + fe296152); $('#fe296154').html(options); */ }); $("#fe296154").change(function() {
$('#divselect3a').show(); $('#divselect3a input[type="text"]').val(""); });
});
<script src="https://cdnjs.cloudflare.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>
, 感谢您的帮助！在这里，我想像这样的隐藏/显示下拉菜单中的选项
drop-down 1 -- please select -- option 1.1 option 1.2
drop-down 2 -- please select -- option 2.1 (if i choose option 1.1,i want to show this option) option 2.2 (if i choose option 1.1,i want to show this option) option 2.3 (if i choose option 1.1,i want to show this option)
option 2.4 (if i choose option 1.2,i want to show this option) option 2.5 (if i choose option 1.2,i want to show this option) option 2.6 (if i choose option 1.2,i want to show this option) option 2.7 (if i choose option 1.2,i want to show this option)
drop-down 3 -- please select -- option 3.1 (if i choose option 2.1,i want to show this option) option 3.2 (if i choose option 2.1,i want to show this option) option 3.3 (if i choose option 2.1,i want to show this option)
option 3.4 (if i choose option 2.2,i want to show this option) option 3.5 (if i choose option 2.2,i want to show this option)
option 3.6 (if i choose option 2.3,i want to show this option) option 3.7 (if i choose option 2.3,i want to show this option)
option 3.8 (if i choose option 2.4,i want to show this option)
option 3.9 (if i choose option 2.5,i want to show this option)
option 3.10 (if i choose option 2.7,i want to show this option) option 3.11 (if i choose option 2.7,i want to show this option) option 3.12 (if i choose option 2.7,i want to show this option) option 3.13 (if i choose option 2.7,i want to show this option) option 3.14 (if i choose option 2.7,i want to show this option)
注意：下拉菜单3没有（2.6）子选项
|
