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();
}
})
})
})
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();
}
})
})
})
-
why are you using
attr("value")and not.val()– epascarello Commented Nov 15, 2017 at 18:37 - So what part is not working? Simple console.log lines will see what is different. – epascarello Commented Nov 15, 2017 at 18:38
- stackoverflow./questions/30762709/… – epascarello Commented Nov 15, 2017 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 Commented Nov 16, 2017 at 11:43
- Because options can not be hidden with CSS in those browser. So you need to remove it. – epascarello Commented Nov 16, 2017 at 11:44
2 Answers
Reset to default 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.
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('');
}) })
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744769097a4592646.html
评论列表（0条）