Question

I have a form select which changes the div based on what is selected. It was working the way I wanted but I want a new feature and the conditional statement is not working. When a user selects all events, it needs to show all the events but the logic is not working.

The code is set up in http://jsfiddle.net/RhW89/

HTML

<form>
<select id="eventFilter">
  <option value="all">All Events</option>
  <option value="a">AAA</option>
  <option value="b">BBB</option>
  <option value="c">CCC</option>
 </select>
</form>

<div id="displayInfo">    
    <div id="a" class="event">Content from AAA</div>
    <div id="b" class="event">Content from BBB</div>
    <div id="c" class="event">Content from CCC</div>

</div>

jQuery

$('#eventFilter').change(function(){
    if(
    $(this).val("all") ){
        alert("showeverything");
        $('.event').show();
    }
    else
    {
        $('.event').hide();
        $('#' + $(this).val()).show();
    }
});
                      ​
​

Answer 1

Change $(this).val("all") which sets the value to all, to:

$(this).val() == "all"

Which will compare the current value to the string “all”.

Updated JSFiddle