【发布时间】：2020-08-14 16:11:20
【问题描述】：
我有三个下拉菜单，但最初只有一个下拉菜单可见。 在第一个下拉列表中选择一个值时，第二个下拉列表将可见。同样，如果我们为第二个下拉菜单选择一个值，那么第三个下拉菜单将可见
每当我重置前一个下拉菜单的值时，我希望下一个下拉菜单重置为 -- 请选择--（目前没有发生）
例如（我需要这个输出）：
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>
【问题讨论】：
-
发布您的代码。
-
添加了 HTML 代码
标签： javascript jquery select dropdown show-hide