php - jquery根据更改另一个下拉菜单禁用下拉项目

Question

我有 2 个下拉菜单，“级别”和“警卫”

Level
-----
1
2
3
etc

Guards
-----
1
2
3
etc

我想禁用 Guards 中大于 Level 值的每个选项。

因此，如果突出显示 2 级，则 Guards 中唯一可用的选项是 1 和 2。

我已经掌握了 change() 的基础知识，只是不确定如何做这部分

Answer 1

执行以下语句：

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

这将是该声明的逻辑。

Answer 2

测试和工作。试试看

$(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);
      }
   });
});

Answer 3

尝试这个

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

检查小提琴