我有 4 个下拉菜单。
默认情况下，每个 drop 都有一个 --select-- 选项。每个盒子都有一个唯一的 ID。如您所见，如果上面的下拉列表值为 --select--，则禁用第二个下拉列表。仅当该值不是 --select-- 时才会启用
这是我的代码：
$(document).ready(function() {
$('#idOfTheFirstDropDown').bind('change', function() {
var options = $(this).children('option');
var item = $('div.c-select').children().hide(); // hide all the elements
var value = Math.floor(Math.random() * options.length );
//console.log(value);
if (value.length) { // if selected
item.show(); // show the next dropdown
}
}).trigger('change');
});
我希望它仅当我之前的下拉值是时才显示下一个下拉列表not- 选择 - 。我的代码正在接受第一个下拉列表，但不更改值。我究竟做错了什么？谢谢。
我的 HTML 为一个下拉框。其余 3 个仅 ID 发生变化。HTML 的其余部分保持不变。
<div class="c-select">
<select name="list1" onchange="javascript:setTimeout('__doPostBack(\'list1\',\'\')', 0)" id="idOfTheFirstDropDown" class="GroupDD dropDown ">
<option selected="selected" value="">-- Select --</option>
<option value="1">Group1</option>
</select>
</div>
我不会隐藏选项，而是使用禁用属性（代码中的注释）：
var selects = $('.drop-down');
selects.not(':eq(0)').prop('disabled', true); // disable all but first drop down
selects.on('change', function() {
var select = $(this),
currentIndex = selects.index(select),
nextIndex = currentIndex + 1;
// only do this if it is not last select
if (currentIndex != selects.length - 1) {
selects.slice(nextIndex) // get all selects after current one
.val('') // reset value
.prop('disabled', true); // disable
selects.eq(nextIndex).prop('disabled', select.val() === ''); // disable / enable next select based on val
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
