jQuery代码可在Windows上运行，但不能在Mac或Safari上运行

Question

以下功能从所有其他选择菜单中删除了所选选项，该功能在Windows chrome和firefox上效果很好，但在Safari或Mac上效果不佳。

您是否知道可能导致此问题的原因？

HTML代码：

<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/