在Jquery中动态选择Drop Down

我有4个下降。

默认情况下，每个drop都有一个–select–选项。 每个盒子都有一个唯一的ID。 如您所见，如果上面的下拉值是–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保持不变。

 
  -- Select -- Group1   

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

   --Select-- 1 2 3 4 
  --Select-- 1 2 3 4 
  --Select-- 1 2 3 4 
  --Select-- 1 2 3 4  

Answer 2

检查一下;

HTML代码：

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

     --select-- one two   --select-- one two   --select-- one two   --select-- one two