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.

Answer 1

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