jQuery 获取选择的下拉值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4430475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get selected dropdown VALUE
提问by GSTAR
I am trying to get the selected dropdown value and perform a slideDown on the DIV that has the option VALUE:
我正在尝试获取选定的下拉值并在具有选项 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>
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).
编辑 2：选择特定选项后，下拉列表应移动到已显示的新 DIV 下方（或新 DIV 应位于下拉列表上方）。
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.
编辑 3：这些隐藏的 div 包含表单元素（复选框或下拉列表）。默认情况下，我已将这些表单元素设置为“禁用”。当显示 DIV 时，它需要使这些表单元素“启用”。理想情况下，我希望它查找该 div 中的任何表单元素（可能有多个），而不是准确指定要定位的表单元素。
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.
编辑 4：提交表单后，需要自动显示提交前显示的任何 DIV。我可以在我的 PHP 中检查 GET 变量，但我需要模拟“更改”函数的 jQuery 代码 - 我认为这与触发器或绑定有关。
采纳答案by Spiny Norman
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:
编辑2：
var $this = $(this),
val = $this.val();
if (val) {
$('#' + val).slideDown().insertBefore(this);
$this.find('option:selected').remove();
}
回答by user113716
$('#show-options').change(function(){
$( '#' + $(this).val() ).slideDown();
return false;
});
回答by Jonathon Bolster
$('#show-options').val()returns a string - in this case it's also the same as doing $(this). You need to wrap this in a jQuery selector to make it work (as well as using an id selector):
$('#show-options').val()返回一个字符串 - 在这种情况下，它也与 $(this) 相同。您需要将其包装在 jQuery 选择器中以使其工作（以及使用 id 选择器）：
var selectedOption = $(this).val();
$("#" + selectedOption).slideDown();
Example: http://jsfiddle.net/jonathon/3S8kZ/
