Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/404.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用javascript动态更改select中的最大值_Javascript_Jquery_Select_Drop Down Menu_Onchange - Fatal编程技术网

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

使用javascript动态更改select中的最大值,javascript,jquery,select,drop-down-menu,onchange,Javascript,Jquery,Select,Drop Down Menu,Onchange,我有两个这样的选择: <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> </s

我有两个这样的选择:

<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>

1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
在本例中,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>

1.
2.
3.
1.
2.
3.

当然,无论我选择什么项目,行为都应该是相同的。

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

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

参考文献


试试这个-

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

演示-

这似乎是一个需求列表,而不是一个问题?向我们展示您的尝试?除此之外,您还需要什么?您不能保持列表项静态如果它们是动态的,您需要根据在“选择1”中选择的选项动态创建后续列表,因此,除了最初的select 1之外,其他的select将动态填充。这正是我所需要的,结合一些php循环为n 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();
        }
    });
});