jquery - 需要隐藏选择选项

Question

编辑我认为这就是OP的意思

我有三个选择框，每个框有 5 个类似的选项。当我从任何选择框中选择一个选项时，它应该从其他两个选择框中消失。

我在这里完成了 js fiddle 链接：http: //jsfiddle.net/thilakar/x66EN/13/

注意：再次从任何选择框中选择一个选项。隐藏选项应显示在其他两个选择框中。

Answer 1

$(function() {
    var sbox = $('select.selectArea[name=fromBox]');
    $('select.selectArea').change(function() {
        var val = this.value,
            allVals = [];
        sbox.each(function() {
            allVals.push(this.value);
        });
        sbox.each(function(index, sel) {
           $('option:hidden', this).show();
           $('option', this).map(function(i, x) {
                if(this.value != '0' && $.inArray(this.value, allVals) != -1) {
                   $(this).hide();
                }
           });
        });
    });
});  

演示

Answer 2

这个jsFiddle 示例怎么样？它不会在您选择元素时删除它们，它只是禁用它们。这样，如果用户改变主意，他们可以返回并进行更改。

jQuery：

$('.selectArea').change(function() {
    var ary = new Array();
    $('.selectArea option:selected').each(function() {
        if ($(this).val().length > 0 && $(this).val() != 0) {
            ary.push($(this).val());
        }
    });
    $('.selectArea option').each(function() {
        if ($.inArray($(this).val(), ary) > -1) {
            $(this).attr('disabled', 'disabled');
        } else {
            $(this).removeAttr('disabled');
        }
    });
});​