我正在研究以下代码。我只想根据第一个选定的值显示选项元素。由于此代码在chrome中正常工作，但在Safari中无法正常工作。hide()和show()功能不起作用。我如何才能改善此代码，使其也可以在Safari中使用？
我的html代码如下：
<body>
<select id="shopcategory">
<option></option>
<option value="american" selected="selected">american</option>
<option value="indian">indian</option>
<option value="chinese">chinese</option>
</select>
<select id="shop-ar">
<option class="american">1</option>
<option class="american">2</option>
<option class="american">3</option>
<option class="indian">4</option>
<option class="indian">5</option>
<option class="indian">6</option>
<option class="chinese">7</option>
<option class="chinese">8</option>
<option class="chinese">9</option>
</select>
我的jQuery代码如下：
$(document).ready(function(){
$("#shopcategory").change(function(){
select= $("#shopcategory option:selected").attr("value");
$("#shop-ar").children().each(function(){
if($(this).attr("class")== select){
// only selected category options must be displayed
$(this).show();
}
else{
$(this).hide();
}
})
})
})
最佳答案
$(document).ready(function(){
$("#shopcategory").change(function(){
var select = $("#shopcategory option:selected").attr("value");
// alert(select);
$("#shop-ar").children().each(function(){
//$(".american").hide();
// alert($(this).attr("id"));
if($(this).attr("class") == select){
$(this).append();
}
else{
$(this).detach();
}
});
});
});
您可以在.show（）和.hide（）函数的位置使用.append（）和.detach（）函数，因为它们在Safari和其他浏览器中会更好地工作。