Question

我有三个相同的选择。我想根据已经选择的内容删除或添加每个选项，以便您只能选择剩下的内容。我尝试了什么

<div id="myselects">
<select class="e1" style="width:300px">
        <option></option>
        <option >Alabama</option>
        <option >Amalapuram</option>
        <option >Anakapalli</option>
       </select>

<select class="e1" style="width:300px">
        <option></option>
        <option >Alabama</option>
        <option >Amalapuram</option>
        <option >Anakapalli</option>
       </select>

<select class="e1" style="width:300px">
        <option></option>
        <option >Alabama</option>
        <option >Amalapuram</option>
        <option >Anakapalli</option>
       </select>
</div>

脚本

$('.e1').change(function(){
 var value=$(this).find('option:selected').val();


 $('#myselects').find('option[value="'+ value +'"]:not(:selected)').attr('disabled','disabled');


});

Answer 1

由于您的选项没有值属性，因此无效。当你得到第一个选择的.val（）时，它将返回“计算”值，该值是选定选项的值属性或选项的“文本”值（这是你将得到的）......但是当您尝试按其值属性过滤其他选项...它们都将为空。

然而，这应该可以比较text()与val（）：

$('.e1').change(function(){
    var value = $(this).find('option:selected').text();
    if(value != ''){
        $('#myselects').find('option:not(:selected)').each(function(){
            if($(this).text() == value){
                //uncomment if you want to disable
                //$(this).attr('disabled','disabled');

                //remove this option
                $(this).remove();
            }
        });
    }
});

您可以在this JSFiddle

中试用

使用jquery显示/隐藏选择选项

1 个答案: