在Jquery中动态选择Drop Down

Question

我有4个下降。

默认情况下，每个drop都有一个--select--选项。每个盒子都有一个唯一的ID。如您所见，如果上面的下拉值是--select--，则禁用第二个下拉列表。它只会在值不是--select -

时启用

这是我的代码：

<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>

我希望它仅在我之前的下拉值不 - 选择 - 时显示下一个下拉列表。我的代码是第一次下拉但没有更改值。我究竟做错了什么？感谢。

我的HTML用于一个下拉框。只剩下剩下的3个ID的更改。其余的HTML保持不变。

modified_layer_output = your_old_function([X]) * some_modification
get_final_layer_output = K.function([model.layers[3].input],
                                  [model.layers[-1].output])
result = get_final_layer_output(modified_layer_output)

Answer 1

我会使用disable属性（代码中的注释）而不是隐藏选项：

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 code：

<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>