在Jquery中动态选择Drop Down [英] Dynamically select Drop Down in Jquery

问题描述

我有4个下拉菜单.

默认情况下，每个放置都有一个--select--选项.每个框都有一个唯一的ID.如您所见，如果上述下拉值为--select--，则第二个下拉菜单将被禁用.仅当值是--select-

Each drop by default has a --select-- option. Each box has a unique id. As you can see, the second drop down is disabled if the above drop down value is --select--. It will only enable when the value is anything but --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--时，我才希望它显示下一个下拉列表.我的代码接受了第一个下拉列表，但未更改其值.我究竟做错了什么?谢谢.

I want it to show the next dropdown only when my previous drop down value is not --select--. My code is taking in the first drop down but not changing the value. What am I doing wrong? Thanks.

我的HTML下拉框.其余3个仅更改ID.其余HTML保持不变.

My HTML for one drop down box. Only the ID's change for the remaining 3. Rest of the HTML remains the same.

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

推荐答案

而不是隐藏选项，我将使用disable属性(代码中的注释):

Rather than hiding the options, I would use the disable attribute (comments in code):

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>

这篇关于在Jquery中动态选择Drop Down的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！