Jquery禁用下拉菜单项基于更改另一个下拉菜单 - jquery disable dropdown items based on changing another dropdown

jquery disable dropdown items based on changing another dropdown

我有两个下拉菜单，'Level'和'Guards'

Level
-----
1
2
3
etc
Guards
-----
1
2
3
etc

我想禁用卫兵中所有大于Level值的选项。

所以如果Level 2被高亮显示，警卫中唯一可用的选项是1和2。

我已经有了基本的变化()，只是不确定如何做这部分

测试成功。Try it out

$(document).on('change', '#drop_down_1', function() {
   var currVal = $(this).val();
   $('#drop_down_2 option').each(function() {
      //enable everything else
      $(this).attr('disabled', false);
      var secondVal = $(this).val();
      if (secondVal > currVal) {
         $('#drop_down_2 option[value='+secondVal+']').attr('disabled', true);
      }
   });
});

执行以下语句:

for (var i = 0; i<3;i++) {
if (level > i) {
guard(i)=disabled;
}
}

这将是该语句的逻辑

try this

var levelsArray = [1,2,3,4,5,6,7,8,9,10];
    $levels = $('#Levels'),
    $gaurds = $('#Gaurds');
$levels.html('<option value="0">--Select a Level--</option>');
$gaurds.html('<option value="0">--Select Gaurds--</option>');
var html='';
for(var i=0;i< levelsArray.length ;i++) {
    html += opt ='<option value="'+ levelsArray[i] +'">'+levelsArray[i] +'</option>'
}
$levels.append(html);
$gaurds.append(html);
$levels.on('change', function() {
    var value = this.value;
    $('option', $gaurds).attr('disabled', false);
    if(value !== 0) {
        $('option:gt('+ value+ ')', $gaurds).attr('disabled', true);
    }
});

检查小提琴