jQuery 获取选定的下拉列表 VALUE

Question

我正在尝试获取选定的下拉值并在具有选项 VALUE 的 DIV 上执行 slideDown：

$(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 代码来模拟“更改”函数 - 我认为这与触发器或绑定有关。

Answer 1

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

Answer 2

$('#show-options').val() 返回一个字符串 - 在这种情况下，它也与 $(this) 相同。您需要将其包装在 jQuery 选择器中以使其工作（以及使用 id 选择器）：

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

示例：http://jsfiddle.net/jonathon/3S8kZ/

Answer 3

试试：

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

编辑：

要删除当前选择的选项，请使用：

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

选择会自动返回顶部选项。

编辑 2：

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

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