Estoy trabajando en el siguiente código. Quiero mostrar solo elementos de opción dependiendo del primer valor seleccionado. Como este código funciona correctamente en Chrome pero no en Safari. las funciones hide() y show() no están funcionando. ¿Cómo puedo mejorar este código para que funcione también en Safari? mi código html es el siguiente:

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

Mi código jquery de la siguiente manera:

$(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();
            }
        })
    })
})
1
suraj jadhav 15 nov. 2017 a las 21:36

2 respuestas

La mejor respuesta

Intenté de nuevo y esta vez obtuve la solución deseada que es la siguiente: lo siento por no formatearlo correctamente ... aquí está mi 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>

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

})})

1
suraj jadhav 16 nov. 2017 a las 12:52
$(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();
    }
   });
 });
});

Puede usar las funciones .append () y .detach () en lugar de las funciones .show () y .hide (), ya que funcionarán mejor con safari y otros navegadores.

3
Jitendra 16 nov. 2017 a las 11:49