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

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

由于您的选项中没有value属性，因此这将不起作用。当你得到第一次选择的。val()，它将返回"计算"值，这是选择的选项的值属性或选项的"文本"值(这就是你将得到的)…但是，当您尝试通过其value属性过滤其他选项时…它们都是空的

然而，这应该工作，因为它比较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();
            }
        });
    }
});

您可以在JSFiddle