CODEWITHSUNDEEP
javascriptjquerysafari
suraj jadhav
suraj jadhav

Reputation: 31

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

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

Upvotes: 2

Views: 9077

Answers (2)

suraj jadhav
suraj jadhav

Reputation: 31

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

}) })

Upvotes: 1

Jitendra
Jitendra

Reputation: 3185

$(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.

Upvotes: 3

Related Questions