Question

我正在处理以下代码。我想只显示选项元素，具体取决于第一个选定的值。由于此代码在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();
            }
        })
    })
})

Answer 1

$(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和其他浏览器一起使用。

Answer 2

我再次尝试，这次我得到了所需的解决方案，如下所示：抱歉没有正确格式化..这是我的HTML：

 <select name="shopcategory" id="shopcategory">
   <option  value="all" selected disabled="disabled">cuisane</option>
   <option  value="american">american</option>
   <option  value="indian">indian</option>
   <option  value="chinese">chinese</option>
</select>
<select name="shop-ar" id="shop-ar" >
  <option class="button" selected="selected">All</option>
  <option data-val="american" value="beverly-hills" >Beverly Hil</option>
  <option data-val="american" value="santa-monica" >Santa </option>
  <option data-val="indian" value="hialea" >Hia</option>
  <option data-val="indian" value="little-havana">Little </option>
  <option data-val="indian" value="north-miami">North </option>
  <option data-val="indian" value="south-beach">South </option>
  <option data-val="chinese" value="chelsea">Chel</option>
  <option data-val="chinese" value="harlem">Har</option>
  <option data-val="chinese" value="noho">No</option>
  <option data-val="chinese" value="soho">So</option>
</select>

jquery代码：

  $(document).ready(function(){                  
         var select_clone = $('#shop-ar option');
         $('#shopcategory').change(function() {
         $("option").show();
         $('#shop-ar').html(select_clone.filter('[data-val="' + this.value + '"]')).show();
         $("#shop-ar").prepend("<option value='' disabled='disabled'>Restaurants</option>").val('');

}） }）

jquery函数在safari中不起作用，但在其他浏览器中正常工作

2 个答案: