Event handler on specific select value with jquery

Question

I am wondering how to fire an event in jQuery based on a specific select value. So, for example i have a small select and div like so:

<select id="sweets">
  <option value ="Option1">Option 1</option>
  <option value ="Option2">Option 2</option>
  <option value ="Option3">Option 3</option>
</select>
<div id='showthis'>You have selected option 2</div>

I want to do something like;

if the user select Option 2,

$('#showthis').show();

if the user selects any other option,

$('#showthis').hide();

I am fairly new to jQuery and i'm not sure how to do a change event based on a specic select value. Any help would be greatly appreciated.

Josiah Ruddell · Accepted Answer · 2011-01-27 21:21:07Z

1

$('#sweets').change(function(){
    var show = $(this).val() == 'Option2';
    $('#showthis').toggle(show);
});

answered Jan 27, 2011 at 21:21

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

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

1 Comment

dangermark Over a year ago

This is exactly what I was after, thank you very much. I knew it involved change(function)), but wasn't quite sure how to grab the specific value i needed. Thanks again.

Ailef · Accepted Answer · 2011-01-27 21:21:26Z

1

Have you tried this?

$('#sweets').change(function() {
    if($(this).attr('value') == 'Option1') {
        // do something
    } else if($(this).attr('value') == 'Option2') {
        // do something else
    } // etc..
}

answered Jan 27, 2011 at 21:21

Ailef

7,92612 gold badges43 silver badges57 bronze badges

Comments

user113716 · Accepted Answer · 2011-01-27 21:20:39Z

0

$('#sweets').change(function() {
    if( this.selectedIndex === 1 ) {
         $('#showthis').show();
    } else {
         $('#showthis').hide();
    }
});

or better yet:

$('#sweets').change(function() {
    $('#showthis').toggle( this.selectedIndex === 1 );
});

The selectedIndex property is a very fast way to reference the selected option.

Using the toggle()^(docs) method you can pass a boolean as a switch argument where true == show and false == hide.

Or to do it by value, you could do this:

$('#sweets').change(function() {
    var val = this.options[ this.selectedIndex ].value;
    $('#showthis').toggle( val === 'Option1' );
});

answered Jan 27, 2011 at 21:20

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Event handler on specific select value with jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related