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

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

javascript jquery safari

Javascript jquery函数在safari中不工作，但在其他浏览器中工作正常,javascript,jquery,safari,Javascript,Jquery,Safari,我正在编写以下代码。我只想根据第一个选定值显示选项元素。因为这段代码在chrome中正常工作，但在safari中却无法正常工作。 hide（）和show（）函数不工作。我如何改进这段代码，使它也能在safari中工作？我的html代码如下： <body> <select id="shopcategory"> <option></option> <option value="american" selected="select

我正在编写以下代码。我只想根据第一个选定值显示选项元素。因为这段代码在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>

$(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();
            }
        })
    })
})

可以在.show（）和.hide（）函数的位置使用.append（）和.detach（）函数，因为它们在safari和其他浏览器中工作得更好

您可以在.show（）和.hide（）函数的位置使用.append（）和.detach（）函数，因为它们可以更好地与safari和其他浏览器配合使用。

我再次尝试，这一次我得到了所需的解决方案，如下所示：很抱歉格式不正确。。这是我的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>


Cuisene
美国人
印度的
中国人
全部的
贝弗利希尔酒店
圣诞老人
Hia
小
北
南方
切尔
哈尔
不
所以

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('');

$（文档）.ready（函数（）{
var select_clone=$（'shop ar option'）；
$（'#shopcategory'）。更改（函数（）{
$（“选项”）.show（）；
$（'#shop ar'）.html（选择_clone.filter（'[data val=“'+this.value+'“]））.show（）；
$（“#店铺应收账款”）.prepend（“餐厅”）.val（“”）；

})

我再试了一次，这次我得到了想要的解决方案，如下所示：很抱歉没有正确格式化。这是我的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>


Cuisene
美国人
印度的
中国人
全部的
贝弗利希尔酒店
圣诞老人
Hia
小
北
南方
切尔
哈尔
不
所以

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('');

$（文档）.ready（函数（）{
var select_clone=$（'shop ar option'）；
$（'#shopcategory'）。更改（函数（）{
$（“选项”）.show（）；
$（'#shop ar'）.html（选择_clone.filter（'[data val=“'+this.value+'“]））.show（）；
$（“#店铺应收账款”）.prepend（“餐厅”）.val（“”）；

})

为什么您使用的是

attr（“value”）

而不是

.val（）

，那么哪个部分不起作用呢？简单的console.log行将看到不同之处。除了hide（），代码工作正常。但是当我使用remove（）或empty（）而不是hide（）时，这些函数工作正常。因为在这些浏览器中不能使用CSS隐藏选项。所以您需要删除它。为什么您使用的是

attr（“value”）

而不是

.val（）

，那么哪个部分不起作用呢？简单的console.log行将看到不同之处。除了hide（），代码工作正常。但是当我使用remove（）或empty（）而不是hide（）时，这些函数工作正常。因为在这些浏览器中不能使用CSS隐藏选项。所以你需要删除它。粘贴代码你应该首先在OP中指出问题，然后建议代码，并且你应该正确设置你的帖子的格式以确保可读性。谢谢你的建议，先生…我下次会按照你的指示做！！如果我的帖子帮助你解决了你的问题，那么请批准我的回答。事实上，先生，你的代码不是我想要的。但是，这确实帮助了我。谢谢！！与其粘贴代码，不如先在操作中指出问题，然后建议代码，并且您应该正确设置帖子的格式，以确保可读性。谢谢您的建议，先生……我下次会按照您的指示操作！！如果我的帖子帮助你解决了你的问题，那么请批准我的回答。事实上，先生，你的代码不是我想要的。但是，这确实帮助了我。谢谢！！