Adding jQuery function to select box to make it change the CSS dynamically

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

Ram · Accepted Answer · 2012-10-26 00:46:43Z

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()
});

edited Oct 26, 2012 at 0:46

answered Oct 26, 2012 at 0:31

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Halcyon · Accepted Answer · 2012-10-26 00:29:06Z

1

$('#chooser').val() will give you the selected value. Then just use if-else or switch.

answered Oct 26, 2012 at 0:29

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

1 Comment

Claudio Delgado Over a year ago

Should I do it like this?: $('#chooser').change{if $('#chooser').val('Car') { $('#house').hide() $('#commercial').hide() $('#other').hide() $('#car').show() }}

Sushanth -- · Accepted Answer · 2012-10-26 00:50:58Z

1

Try this

$(function() {
    $('#chooser').on('change', function() {
        $('div').hide();
        var val = $(this).find('option:selected').val();
        if (val != '') {
            $('#' + val.toLowerCase()).show();
        }
    }).change();
});

Try this FIDDLE

edited Oct 26, 2012 at 0:50

answered Oct 26, 2012 at 0:32

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Adding jQuery function to select box to make it change the CSS dynamically

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related