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

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 个解决方案

解决方案1
3 2017-11-15 20:17:42

解决方案2
1 已采纳 2017-11-16 12:52:19

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

问题描述

2 个解决方案

解决方案1 3 2017-11-15 20:17:42

解决方案2 1 已采纳 2017-11-16 12:52:19

解决方案1
3 2017-11-15 20:17:42

解决方案2
1 已采纳 2017-11-16 12:52:19