Question

以下功能从所有其他选择菜单中删除所选选项，它适用于Windows Chrome和Firefox，但不适用于Safari或Mac。

你知道可能导致问题的原因吗？

HTML code：

<select>
    <option>slelect</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<select>
    <option>slelect</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<select>
    <option>slelect</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<select>
     <option>slelect</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

jQuery代码：

(function () {
    var previous;
    $("select").on('focus', function () {
        previous = this.value;
    }).change(function(){
        $elm = $(this).children('option:selected');
        $a = $elm.val();
        $('option[value=' + $a + ']').not($elm).hide();
        $('option[value=' + previous + ']').not($elm).show();   
    });
})();

Answer 1

这是因为.hide（）只是在选项中添加了display：none css属性问题在于以下几个方面：

  $('option[value=' + $a + ']').not($elm).hide();
  $('option[value=' + previous + ']').not($elm).show();

如果我们更改那些使用禁用状态，它会按预期工作

  $('option[value=' + $a + ']').not($elm).attr('disabled', 'disabled');;
  $('option[value=' + previous + ']').removeAttr("disabled");

您所看到的是允许选择列表样式的浏览器差异。某些浏览器允许您执行更改背景颜色等操作。有些人没有，这就是为什么这是一个糟糕的方法。只需使用禁用状态即可。

http://jsfiddle.net/o9qgmut8/

Jquery代码在Windows上运行，但在Mac或Safari上运行

1 个答案: