jQuery get selected dropdown VALUE

Question

I am trying to get the selected dropdown value and perform a slideDown on the DIV that has the option VALUE:

$(function()
{
    $('#show-options').change(function(){
        $('#show-options').val().slideDown();
        return false;
    });
});

<select id="show-options">
  <option value="">Select an Option</option>
  <option value="vehicle-type">Vehicle Type</option>
  <option value="vehicle-colour">Vehicle Colour</option>
</select>

<div id="vehicle-type" style="display: none;">
  ...
</div>

<div id="vehicle-colour" style="display: none;">
  ...
</div>

This does not seem to be working.

EDIT: Also once a particular option has been selected it should be removed from the dropdown and the dropdown should be focussed on the top option ("Select an Option").

EDIT 2: Once a particular option has been selected the dropdown should move below the new DIV that has been displayed (or the new DIV should go above the dropdown).

EDIT 3: These hidden divs contain form elements (checkboxes or dropdowns). By default I have set these form elements to "disabled". When a DIV is shown it needs to make those form elements "enabled". Ideally I want it to look for any form elements that are in that div (there may be more than one), rather than specifying exactly which form elements to target.

EDIT: I figured it out:

$('#' + $(this).val() + ' :input').removeAttr('disabled');

EDIT 4: Once the form has been submitted, any DIVs that were displayed before submission need to be displayed automatically. I can check for the GET variables in my PHP but I need the jQuery code that will mimic the 'change' function - I think this has something to do with triggers or binds.

Well, maybe you already figured it out, but you can use .trigger('change') or simply .change(). — Spiny Norman
– Spiny Norman, Commented Dec 13, 2010 at 22:31

user113716 · Accepted Answer · 2010-12-13 15:39:24Z

4

$('#show-options').change(function(){
    $( '#' + $(this).val() ).slideDown();
    return false;
});

answered Dec 13, 2010 at 15:39

user113716

323k64 gold badges454 silver badges441 bronze badges

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

Comments

Jonathon Bolster · Accepted Answer · 2010-12-13 15:38:53Z

3

$('#show-options').val() returns a string - in this case it's also the same as doing $(this). You need to wrap this in a jQuery selector to make it work (as well as using an id selector):

var selectedOption = $(this).val();
$("#" + selectedOption).slideDown();

Example: http://jsfiddle.net/jonathon/3S8kZ/

answered Dec 13, 2010 at 15:38

Jonathon Bolster

16k3 gold badges45 silver badges47 bronze badges

Comments

Spiny Norman · Accepted Answer · 2010-12-13 15:48:46Z

2

Try:

$('#' + $(this).val()).slideDown();

EDIT:

To remove the currently selected option, use:

if ($(this).val()) {
    $(this).find('option:selected').remove();
}

The select will automatically return to the top option.

EDIT 2:

var $this = $(this),
    val = $this.val();

if (val) {
    $('#' + val).slideDown().insertBefore(this);
    $this.find('option:selected').remove();
}

edited Dec 13, 2010 at 15:48

answered Dec 13, 2010 at 15:39

Spiny Norman

8,3271 gold badge34 silver badges57 bronze badges

2 Comments

MAX POWER Over a year ago

That's brilliant, that works perfect. BTW I just realised I could just put my select below all the hidden divs and they'll appear above it anyway :)

MAX POWER Over a year ago

Just updated my question again - definitely last bit of help needed :)

Collectives™ on Stack Overflow

jQuery get selected dropdown VALUE

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related