Question

我还在学习jQuery，但我认为这可能很简单：

我有2个下拉框，其名称和ID为：topnumber，bottomnumber

两个列表都包含数字1-5。

我想要做的是使用jQuery来禁用或删除bottomnumber任何数字，而不是他们在顶部数字中选择的数字（等于OK）。例如，如果他们在topnumber中选择3，则会从bottomnumber列表中删除或禁用4和5。

感谢任何帮助。谢谢！克里斯

Answer 1

试试这个

正在使用 demo

$(function(){
  $('#topnumber').change(function() {
     var topValue = parseInt(this.value);

     $('#bottomnumber option').attr("disabled", false).filter(function(){
        //This will make sure to select only options with value > topValue
        return (topValue < parseInt(this.value)); 
     }).attr("disabled", true);
   });
});

Answer 2

Working Example

$('#topNumber').change(function() {
    var num = $(this).val();
    $('#bottomNumber option').removeAttr('disabled').filter(function() {
        return Number($(this).attr('value')) >= num;
    }).attr('disabled', 'disabled');
});

此代码使用filter()将匹配的选项集减少到大于val的选项，然后禁用匹配集中的所有选项。

Answer 3

您需要绑定到每个下拉列表的更改事件，并根据用户输入的内容更改另一个的值。

为此，请使用jQuery的。change，例如

$("#bottomnumber").change(function() { 
$(this).val() - this will be the selected value
$("#topnumber")...do stuff to the top number one
});

反之亦然。

希望这有助于...而不是完整的代码，但应该让你朝着正确的方向前进。

Answer 4

Here是一个实例。

$(document).ready(function(){
   buildBottomOptions();
});

$('#top').change(function() {
    buildBottomOptions();
});


function buildBottomOptions() {
    var value = $('#top').val();
    var options = '';

    for (i = 1; i <= value; i++)
       options += '<option value="' + i + '">' + i + '</option>';

    $('#bottom').find('option').remove().end().append(options);
}

Answer 5

使用:gt selector可以让您轻松完成此操作。 Working example

$("#topnumber").change(function(e) {
   // turn the value of #topnumber in a javascript integer
   var num = parseInt($(this).val());
   // :gt is zero-indexed, which means that :gt(0) will get 2,3,4,5
   // and 1 would get 3,4,5 etc, etc.., so subtract one.
   num = num - 1 
   // reset the list so that everything is active.
   $("#bottomnumber option").removeAttr('disabled');
   // disable the ones which are higher than topnumber's value
   $("#bottomnumber option:gt("+num+")").attr('disabled', 'disabled');
});

Answer 6

$(document).ready(function () {
    $('select[id="topnumber"]').change(function () {
        var maxValue = parseInt($('select[id="topnumber"]').attr('value'));
        $(' select[id="bottomnumber"] option').attr('disabled', false).filter(function() {
            return parseInt($(this).attr('value')) > maxValue ;
        }).attr('disabled', true);
    });
});

请参阅此处的示例：http://jsfiddle.net/XLUju/

如何使用jQuery修改下拉列表

6 个答案: