javascript - Show divs if selected option -
i'm trying make select box options like: bar, restaurant, hotel. , list objects if user choose eg. bar, objects restaurant , hotel should hidden. check jsfiddle: http://jsfiddle.net/s0w98owg/
the problem is, when choose bar 1st div changing
js:
$('#type').change(function(){ if ($(this).val() == "bar") { $("#restaurant").hide(); $("#bar").show(); } else if ($(this).val() == "restaurant") { $("#bar").hide(); $("#restaurant").show(); } });
you can not give same id multiple objects. can given same id bar , restaurant multiple tags.
do this:
$('#type').change(function(){ if ($(this).val() == "bar") { $(".restaurant").hide(); $(".bar").show(); } else if ($(this).val() == "restaurant") { $(".bar").hide(); $(".restaurant").show(); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select id="type" onclick="filtermarkers(this.value);"> <option value="">wybierz kategorię</option> <option value="restaurant">pierwsza</option> <option value="bar">druga</option> </select> <ul id="pasekboczny"> <li class="list-sidebar restaurant"><a href="javascript:myclick(0)">jasło</a></li> <li class="list-sidebar restaurant"><a href="javascript:myclick(1)">jaworzno</a></li> <li class="list-sidebar bar"><a href="javascript:myclick(2)">jędrzejów</a></li> <li class="list-sidebar restaurant"><a href="javascript:myclick(3)">solidarności</a></li> <li class="list-sidebar bar"><a href="javascript:myclick(4)">Łódź</a></li></ul> i have changes id name class , in js have given . instead of #.
you can try below optimize js:
$('#type').change(function(){ var selected = $(this).val(); $("#pasekboczny li").hide(); $("."+selected+"").show(); });
Comments
Post a Comment