下拉代码可在Chrome中使用，但不能在Safari中使用？

Question

Anyone know why this dropdown code would be working in Chrome(mac), but not Safari(mac)?

http://jsfiddle.net/v917ycp6/5/

$(function(){

var $cat = $("#category1"),
    $subcat = $("#category2");

$cat.on("change",function(){
    var _rel = $(this).val();
    $subcat.find("option").attr("style","");
    $subcat.val("");
    if(!_rel) return $subcat.prop("disabled",true);
    $subcat.find("[rel="+_rel+"]").show();
    $subcat.prop("disabled",false);
});

});

Answer 1

It seems that Safari's selects doesn't work the same as Chrome, and it doesn't allow to disable options with display: none nor with the hidden attribute, so you will need to remove the option elements from the parent select. Other option might be to have 3 different selects, one for each category, and what you show / hide are the full selects in this case.