Question

I want my select box to dynamically change the CSS of another part of the page so that the right options are visible according to each selection.

E.g. the right DIV elements are shown when the correlating select option is selected.

My select input and DIVs:

<select id="chooser" class="input_select" name="chooser">
<option value="">Select...</option>
<option value="Car">Car</option>
<option value="House">House</option>
<option value="Commercial">Commercial</option>
<option value="Other">Other</option>
</select>

<div id="car" style="display:none;">Cars</div>
<div id="house" style="display:none;">House related</div>
<div id="commercial" style="display:none;">Commercial stuff</div>
<div id="other" style="display:none;">Other stuff</div>

my jquery so far:

$(document).ready(function() {

$('#chooser').change{
  $('#house').hide()
  $('#commercial').hide()
  $('#other').hide()
  $('#car').show()
}
});

I’m a noob at jQuery and I just don’t know HOW to tell it to filter it by which option is selected. I mean, I think I added the .change{} part right but no idea how to filter it.

Any help is appreciated. Thanks

Answer 1

There is a syntax error in your code, you should pass a function for the change event, try the following:

$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('div').hide().filter('#'+w).show();
   })
});

http://jsfiddle.net/ss5G9/

Surely hiding all the div elements on the page is not a good idea, you can add classes to your div elements and hide those specific div elements instead.

<div id="car" class='div' style="display:none;">Cars</div>
<div id="house" class='div' style="display:none;">House related</div>
<div id="commercial" class='div' style="display:none;">Commercial stuff</div>
<div id="other" class='div' style="display:none;">Other stuff</div>

$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('.div').hide().filter('#'+w).show();
   }).change()
});