在 Jquery 中動態選擇下拉列表

Question

我有 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');
});

我希望它僅在上一個下拉值不是--select-- 時顯示下一個下拉列表。 我的代碼接受了第一個下拉列表，但沒有更改值。 我究竟做錯了什么？ 謝謝。

我的一個下拉框的 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>

Answer 1

我不會隱藏選項，而是使用禁用屬性（代碼中的注釋）：

 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>

Answer 2

檢查這個；

HTML代碼：

<select id="sel-1"></select>
<select id="sel-2"></select>
<select id="sel-3"></select>
<select id="sel-4"></select>

JS代碼：

$(document).ready(function(){

     $("[id^=sel]").change(function(){

           /*
           *  find out the current box id
           */

           var id=$(this).attr("id");
           /*
           *  find out the current box id order number
           */

           var ordernumber=id.split("-")[1];

           if($(this).val()!="select")
           {
                 //enable next one
                 $("#sel-"+(ordernumber+1)).show();
           }
     })
})

Answer 3

假設具有'--select--'作為文本的選項沒有值，只需在處理程序上使用val來檢查所選選項是否不是空的

if(this.val() !== '') {
// enable following select
}

Answer 4

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style> select { margin: 5px 0; display: block; } </style> <script> $(function() { $('.cls-select').change(function() { if ($(this).val() == '--select--') { // reset and disable the next drop downs $('.cls-select:gt(' + $('.cls-select').index($(this)) + ')').val('--select--').prop('disabled', true) } else { // current drop down has value so enable the next drop down $(this).next().prop('disabled', false); } }); }) </script> <select class="cls-select"> <option>--select--</option> <option>one</option> <option>two</option> </select> <select class="cls-select" disabled> <option>--select--</option> <option>one</option> <option>two</option> </select> <select class="cls-select" disabled> <option>--select--</option> <option>one</option> <option>two</option> </select> <select class="cls-select" disabled> <option>--select--</option> <option>one</option> <option>two</option> </select>