使用javascript动态更改select中的最大值

Dynamic change max values in select with javascript

本文关键字：最大值 select javascript 动态 使用      更新时间：2023-09-26

我有两个这样的选择：

<select id='select1'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

<select id='select2'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

<select id='select3'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

在这个例子中，5是一个最大值，所以如果我在select1中选择值2，我希望我的select2和select3具有最大值：5-2=3以获得最终输出：

<select id='select2'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
<select id='select3'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>

当然，无论我选择什么项目，行为都应该是一样的。

试试这个-

$( document ).ready(function() {
    $("#select1").change(function(){
        $("#select2 option, #select3 option").show();
        var maxValue = 5 - $(this).val();
        for (var i = 5; i > maxValue; i--)
        {
            $("#select2 option[value='"+i+"'], #select3 option[value='"+i+"']").hide();
        }
    });
});

演示-http://jsfiddle.net/9DAE4/3/

var sel = $('#select2,#select3');
$('#select1').change(function () {
    var val = this.value; //get value
    sel.val('1').find('option').show(); //set value 1 to select 2,3 and show all options
    sel.find('option[value="' + val + '"]').nextAll('option').hide(); //hide nextAll values next to max value
});

小提琴演示

参考

.change（）

.nextAll（）

.val（）

.find（）

属性等于选择器

更新的小提琴演示

var sel = $('#select2,#select3');
$('#select1').change(function () {
    var val = 5 - this.value;
    sel.val('1').find('option').show();
    if (val === 0) {
        sel.find('option').hide();
    } else {
        sel.find('option[value="' + val + '"]').nextAll('option').hide();
    }
});

在这种情况下，您必须在选择第一个选择框时使用onChange事件。此事件将调用一个javascript方法，该方法将动态创建/修改其他选择框。

相关文章：