JQuery выбран раскрывающийся VALUE

Question

Я пытаюсь получить выбранное выпадающее значение и выполнить slideDown на DIV, который имеет опцию 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> 

делает.

EDIT: Также, когда выбран конкретный вариант, его следует удалить из раскрывающегося списка, а раскрывающийся список следует сосредоточить на верхней опции («Выбрать опцию»).

РЕДАКТИРОВАТЬ 2: После выбора определенной опции выпадающий список должен перемещаться ниже нового DIV, который был отображен (или новый DIV должен выйти выше выпадающего списка).

EDIT 3: Эти скрытые div содержат элементы формы (флажки или выпадающие списки). По умолчанию я установил эти элементы формы как «отключенные». Когда показан DIV, он должен сделать эти элементы формы «включенными». В идеале я хочу, чтобы он искал любые элементы формы, которые находятся в этом div (их может быть несколько), вместо того, чтобы точно определять, какие элементы формы должны быть нацелены.

EDIT: я понял это:

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

EDIT 4: После того, как форма была отправлена, либо DIVs, которые отображались перед подачей должны отображаться автоматически. Я могу проверить переменные GET на моем PHP, но мне нужен код jQuery, который будет имитировать функцию «change». Я думаю, что это имеет какое-то отношение к триггерам или связям.

Answer 1

Try:

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

EDIT :

Чтобы удалить выбранный вариант, используйте:

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

Выбор автоматически вернется к верхнему варианту.

EDIT 2:

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

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

Answer 2

$('#show-options').val() возвращает строку - в этом случае это тоже то же самое, что и для $ (this). Вы должны обернуть это в селекторе JQuery, чтобы заставить его работать (а также с помощью селектора ID):

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

Пример: http://jsfiddle.net/jonathon/3S8kZ/

Answer 3

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