jquery functions are not working in safari but working properly in other browsers

Question

I am working on the following code. I want to show only option elements depending on the first selected value. As this code is working properly in chrome but not in safari. the hide() and show() functions are not working. How i can improve this code so that it will work in safari also? my html code is as follows:

<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>

my jquery code as follows:

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

So what part is not working? Simple console.log lines will see what is different. — epascarello, Nov 15 '17 at 18:38
https://stackoverflow.com/questions/30762709/jquery-hide-option-element-by-value — epascarello, Nov 15 '17 at 18:39
the code works properly except hide()..but when i use remove() or empty() instead of hide()..these functions are working properly.. — suraj jadhav, Nov 16 '17 at 11:43
Because options can not be hidden with CSS in those browser. So you need to remove it. — epascarello, Nov 16 '17 at 11:44
hi sir, with some changes i was able to use hide() show() functions..but i don't know why it is working now and love to know more about this browser compatibility solutions..thank you for your intrest !! — suraj jadhav, Nov 16 '17 at 12:57

Jitendra · Answer 1 · 2017-11-16T11:49:36.417

3

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

You can use .append() and .detach() functions at the place of .show() and .hide() functions as they will work better with safari and other browsers.

edited Nov 16 '17 at 11:49

answered Nov 15 '17 at 20:17

Jitendra

3,135
2
26
42

1

rather that pasting code you should first point out the problem in the OP and then suggest the code , and you should properly format your post for readability – Muhammad Omer Aslam Nov 15 '17 at 20:21
thanks for your advice sir...i'll follow your instructions next time !! – suraj jadhav Nov 16 '17 at 11:39
1

if my post helped to you to solve your problem then please approve my answer. – Jitendra Nov 16 '17 at 11:47
actually sir, your code is not what i am looking for..but surely, that helped me..thank you !! – suraj jadhav Nov 16 '17 at 11:52

score 1 · Accepted Answer · answered Nov 16 '17 at 12:52

I tried again and this time i got desired solution which is as follows:sorry for not formatting it correctly..here is my 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 code:

  $(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 functions are not working in safari but working properly in other browsers

2 Answers2