jQuery 获取选定的下拉列表值

Question

我正在尝试获取选定的下拉值并在具有选项 VALUE 的 DIV 上执行幻灯片:

$(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>

这似乎不起作用。

编辑:此外，一旦选择了特定选项，就应将其从下拉列表中删除，并且下拉列表应集中在顶部选项(“选择选项”)。

编辑 2:选择特定选项后，下拉列表应移至已显示的新 DIV 下方(或者新 DIV 应移至下拉列表上方)。

编辑 3:这些隐藏的 div 包含表单元素(复选框或下拉菜单)。默认情况下，我已将这些表单元素设置为“禁用”。当显示 DIV 时，它需要使这些表单元素“启用”。理想情况下，我希望它查找该 div 中的任何表单元素(可能有多个)，而不是准确指定要定位的表单元素。

编辑:我想通了:

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

编辑 4:提交表单后，提交前显示的所有 DIV 都需要自动显示。我可以检查 PHP 中的 GET 变量，但我需要模仿“更改”函数的 jQuery 代码 - 我认为这与触发器或绑定(bind)有关。

Answer 1

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