jquery禁用基于更改另一个下拉列表的下拉项

时间:2013-06-04 22:12:04

标签: php jquery forms

我有2个下拉菜单,'Level'和'Guards'

Level
-----
1
2
3
etc

Guards
-----
1
2
3
etc

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

因此,如果突出显示级别2,则可用的防护中唯一选项是1和2.

我已经有了改变()的基础知识,只是不确定如何做这个部分

3 个答案:

答案 0 :(得分:0)

请执行以下声明:

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

这将是该陈述的逻辑。

答案 1 :(得分:0)

经过测试和工作。试一试

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

答案 2 :(得分:0)

试试这个

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

<强> Check Fiddle