CODEWITHSUNDEEP
javascriptjqueryhtml
Szmerd
Szmerd

Reputation: 499

Show divs if selected option

I'm trying to make a select box with options like: bar, restaurant, hotel. And from list with all objects if user choose eg. bar, objects with restaurant and hotel should be hidden. Check my jsfiddle: http://jsfiddle.net/s0w98owg/

The problem is, when i choose bar only 1st div is changing

js: 

$('#type').change(function(){
if ($(this).val() == "bar") {
    $("#restaurant").hide();
    $("#bar").show();
} 
else if ($(this).val() == "restaurant") {
    $("#bar").hide();
    $("#restaurant").show();
} });

Upvotes: 1

Views: 705

Answers (6)

Mick Redman
Mick Redman

Reputation: 56

I've included some HTML to confirm what you mean

<select name="type" id="type">
    <option value="bar">Bar</option>
    <option value="restaurant">Restaurant</option>
    <option value="hotel">Hotel</option>
</select>
<div id="bar" class="type">Bar</div>
<div id="restaurant" class="type">Restaurant</div>
<div id="hotel" class="type">Hotel</div>

Now the jQuery

$('div.type').hide();
$('#type').change(function()
{
    $('div.type').hide();
    $('#'+$(this).val()).toggle();
});

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

Id should be unique use class instead of id ,then you can write a code in single line

HTML

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

JS

$('#type').change(function () {
    $(".list-sidebar").not("." + this.value).hide().end().filter("." + this.value).show();
});

DEMO

Upvotes: 1

Rayudu
Rayudu

Reputation: 1816

Its better to show different list sections with different ID's

$('#type').change(function(){
    if ($(this).val() == "bar") {
        $("#restaurant").hide();
        $("#bar").show();
    } 
    else if ($(this).val() == "restaurant") {
        $("#bar").hide();
        $("#restaurant").show();
    } 
  else if($(this).val() == ""){
        $("#bar").show();
        $("#restaurant").show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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="restaurant">
    <li class="list-sidebar" id=""><a href="javascript:myclick(0)">Jasło</a></li>
    <li class="list-sidebar" id=""><a href="javascript:myclick(1)">Jaworzno</a></li>
   
    <li class="list-sidebar" id=""><a href="javascript:myclick(3)">Solidarności</a></li>

</ul>
<ul id="bar">
     <li class="list-sidebar" id=""><a href="javascript:myclick(2)">Jędrzejów</a></li>

    <li class="list-sidebar" id=""><a href="javascript:myclick(4)">Łódź</a></li>    
</ul>

Updated Fiddle

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Id be unique in html Instead of id Use common class for all li tag

html be

<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" id="restaurant"><a href="javascript:myclick(3)">Solidarności</a></li>
    <li class="list-sidebar bar" ><a href="javascript:myclick(4)">Łódź</a></li></ul>

jquery code be simple

$('#type').change(function(){
    $(".list-sidebar").hide(); // hide all the li haveing common class
    $('.' + $(this).val()).show(); // show the particular selected class
});

Fiddle

Upvotes: 2

FatalError
FatalError

Reputation: 550

You can not give the same id to multiple objects. You can given the same id bar and restaurant to 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 into class and in JS I have given . instead of #.

You can also try below optimize JS:

$('#type').change(function(){
    var selected = $(this).val();
    $("#pasekBoczny li").hide();
    $("."+selected+"").show();
});

Upvotes: 2

Siamak Ferdos
Siamak Ferdos

Reputation: 3299

You are using from multi id with one name! Try chnage them to attribute: fiddle

<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" data-li-id="restaurant"><a href="javascript:myclick(0)">Jasło</a></li>
    <li class="list-sidebar" data-li-id="restaurant"><a href="javascript:myclick(1)">Jaworzno</a></li>
    <li class="list-sidebar" data-li-id="bar"><a href="javascript:myclick(2)">Jędrzejów</a></li>
    <li class="list-sidebar" data-li-id="restaurant"><a href="javascript:myclick(3)">Solidarności</a></li>
    <li class="list-sidebar" data-li-id="bar"><a href="javascript:myclick(4)">Łódź</a></li>
</ul>

$('#type').change(function(){

    if ($(this).val() == "bar") {
        $("li[data-li-id='restaurant']").hide();
        $("li[data-li-id='bar']").show();
    } 
    else if ($(this).val() == "restaurant") {
        $("li[data-li-id='bar']").hide();
        $("li[data-li-id='restaurant']").show();
    } 
});

Upvotes: 0

Related Questions