CODEWITHSUNDEEP
javascriptjqueryselecttoggle
mousesports
mousesports

Reputation: 499

Toggle div based on multiple select

The following code is what I am working with:

<select id="tables" multiple="multiple" name="tables[]">
      <option>users</option>
      <option>options</option>
      <option>posts</option>
</select>

<div id="something" style="hidden">Stuff goes here.</div>

What I am trying to do is have a div toggle when a specific option is selected in the dropdown. For instance, if only the 'options' option is selected, the div shows. Deselected, it gets removed.

Upvotes: 1

Views: 2127

Answers (3)

Brad Christie
Brad Christie

Reputation: 101614

$('#tables').change(function(e){
  $('#something').toggle($(this).val() == 'options');
});

On a selection change, show/hide the div if the selected option's value is equal to "options"

Update for multi-select:

$('#tables').change(function(e){
    $('#something').toggle($('option[value="options"]:selected',this).length > 0);
});

Updated demo: http://jsfiddle.net/NXHnp/1/

Upvotes: 1

Nick Brunt
Nick Brunt

Reputation: 10077

Working solution: http://jsfiddle.net/uA7XD/

JS:

window.changeHandler = function() {
    var op = $("#tables option[value='options']:selected");
    if (op.length)
        $("#something").show();
    else
        $("#something").hide();
}

HTML:

<select id="tables" multiple="multiple" name="tables[]" onchange="changeHandler()">
      <option>users</option>
      <option>options</option>
      <option>posts</option>
</select>

<div id="something" class="hidden">Stuff goes here.</div>

CSS:

.hidden {
    display:none;
}

Upvotes: 2

Riz
Riz

Reputation: 10246

  $('#tables').live('click', function(){
    if($('#tables').val() == 'options')
      $('#something').slideDown();
    else
      $('#something').slideUp();
  });

Upvotes: 0

Related Questions