Question

我有2个选择，我想根据第二个选择的值从第一个中删除值。例如：如果我从第二个选择中选择值1和2，我希望隐藏值2,3,4,5，如果在第二个选择值为3，我希望隐藏值1,2,3：

选择1：

<select name="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 name="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

这是隐藏在选择1或2的情况下的代码：

var ary=[2,3,4,5];
$('[name=select1] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);}).hide();

此代码适用于隐藏，但我遇到了问题。当代码在值1和2上隐藏2,3,4,5时，在第二个选择中选择值3仅显示值1，因为其他值是隐藏的。我用show（）解决了这个问题。然后显示2,3,4,5但我无法隐藏值1因为返回：//我试过这个，它不起作用：

var ary=[4,5];
var ary2=[1];
$('[name=select1] option').filter(function(){
return ($.inArray(parseInt(this.value),ary) >-1);}).hide()&&($.inArray(parseInt(this.value),arry2) >-1);}).show();

我还尝试调用另一个总是刷新select1的函数，显示所有值，并且在这个函数中只使用隐藏，我认为这是正确的方法，但我不知道如何解决它？

Answer 1

这里的小提琴：http://jsfiddle.net/8ZuGE/

请注意，我想这里的添加列表项可能会更高效，但您明白了这一点：

var $resetValues = $('#select1').find("option");

$('#select2').on('change', function() {
    var selected = $("option:selected", this).val();
    // Reset select1
    $('#select1').empty();
    $resetValues.each(function() {
         $('#select1').append($(this));
    });

    var array; // Hidden values
    if(selected > 0 && selected < 3) {
        array = [2,3,4,5];
    } else {
        array = [1,2,3];
    }

    $('#select1 option').filter(function() {
        return ($.inArray(parseInt($(this).val()), array) != -1);
    }).remove();
});

隐藏和显示多个选择

1 个答案: