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变量，但是我需要模仿'change'函数的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();
}

jQuery获得选择下拉列表值

3 个答案: