Question

我有一个页面，显示页面上有3个下拉选择器。我还有一个jQuery代码，它检查以确保如果选择了一个选项，则不允许在其他2个下拉列表中选择相同的选项。

我需要更改代码，不要只是停止允许选择复制，而是从这个下面的其他下拉列表中完全删除选定的选项。我假设我必须将所有选项放入一个数组中，并在生成下一个下拉列表时以某种方式从列表中删除。

或者我需要用一种类别标记已经选择的颜色，或许。

这是我目前的代码：

$('.mySelect').change(function(index, elem){
    var myFilter = $(this).val();
    if(myFilter !="selectOne"){
        var size = $('.qSelect').not(this).not(function(index){
        return $(this).val() != myFilter;
    }).size();
        if(size > 0){
            alert("already selected.");
        } else {
            // do something
        }   
    }   
});

<select name="select1" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

<select name="select2" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>   

<select name="select3" class="mySelect">
    <option value="selectOne">Select one</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Answer 1

您可以使用正确的表单字段行为并将选项设置为“已禁用”，而不是创建数组并删除/重新插入项目。如果删除元素，可能会让用户感到困惑。

你可以这样做：

$('.mySelect').bind('change', function(el) {

    var _this = $(this),
        newVal = _this.val();
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
            option[value=' + _this.data('oldVal') + ']').attr('disabled', false);
    $('select.mySelect:not([name=' + _this.attr('name') + ']) 
            option[value=' + newVal + ']').attr('disabled', true);
    _this.data('oldVal', newVal);

});

（http://jsfiddle.net/KT856/）

您可以更改“.attr（'disabled'，true）”以应用您决定的治疗方法。

另外 - 我假设您也在服务器端验证了这一点;）

编辑：更新的脚本，以便存储“上一个选择”，以便在选择更改时重新启用其他选项中的选项。

注意：无论用户选择哪种选项，这种方法都会有效。

Answer 2

如何使用jQuery的remove function与attribute-equals-selector结合使用？因此，在更改时会遍历其他下拉列表并删除此选项

option[value=myFilter]

顺便说一下。如果用户首先从第三个下拉列表中选择会发生什么？

使用jquery动态下拉列表

2 个答案: