Javascript 如何获取下拉列表的选定索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3628210/
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
how to get the selected index of a drop down
提问by user357034
I have a normal dropdown which I want to get the currently selected index and put that in a variable. Jquery or javascript. Jquery perfered.
我有一个普通的下拉列表，我想获取当前选择的索引并将其放入变量中。Jquery 或 JavaScript。首选 Jquery。
<select name="CCards">
<option value="0">Select Saved Payment Method:</option>
<option value="1846">test xxxx1234</option>
<option value="1962">test2 xxxx3456</option>
</select>
回答by naivists
$("select[name='CCards'] option:selected")should do the trick
$("select[name='CCards'] option:selected")应该做的伎俩
See jQuery documentation for more detail: http://api.jquery.com/selected-selector/
有关更多详细信息，请参阅 jQuery 文档：http: //api.jquery.com/selected-selector/
UPDATE:
if you need the indexof the selected option, you need to use the .index()jquery method:
更新：如果需要选中选项的索引，则需要使用.index()jquery方法：
$("select[name='CCards'] option:selected").index()
回答by Jamiec
This will get the index of the selected option on change:
这将在更改时获取所选选项的索引：
$('select').change(function(){
console.log($('option:selected',this).index());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="CCards">
<option value="0">Select Saved Payment Method:</option>
<option value="1846">test xxxx1234</option>
<option value="1962">test2 xxxx3456</option>
</select>回答by RoToRa
If you are actually looking for the index number (and not the value) of the selected option then it would be
如果您实际上是在寻找所选选项的索引号（而不是值），那么它将是
document.forms[0].elements["CCards"].selectedIndex
/* You may need to change document.forms[0] to reference the correct form */
or using jQuery
或使用 jQuery
$('select[name="CCards"]')[0].selectedIndex
回答by lincolnk
the actual index is available as a property of the select element.
实际索引可用作 select 元素的属性。
var sel = document.getElementById('CCards');
alert(sel.selectedIndex);
you can use the index to get to the selection option, where you can pull the text and value.
您可以使用索引进入选择选项，您可以在其中提取文本和值。
var opt = sel.options[sel.selectedIndex];
alert(opt.text);
alert(opt.value);
回答by Alex
<select name="CCards" id="ccards">
<option value="0">Select Saved Payment Method:</option>
<option value="1846">test xxxx1234</option>
<option value="1962">test2 xxxx3456</option>
</select>
<script type="text/javascript">
/** Jquery **/
var selectedValue = $('#ccards').val();
//** Regular Javascript **/
var selectedValue2 = document.getElementById('ccards').value;
</script>
回答by Daniel Lizik
You can also use :checkedfor <select>elements
您也可以:checked用于<select>元素
e.g.,
例如，
document.querySelector('select option:checked')
document.querySelector('select option:checked').getAttribute('value')
You don't even have to get the index and then reference the element by its sibling index.
您甚至不必获取索引，然后通过其同级索引引用该元素。
