Question

我有一个正常的下拉列表，我希望得到当前选择的索引并将其放入变量中。 Jquery或javascript。 Jquery perfered。

<select name="CCards">
<option value="0">Select Saved Payment Method:</option>
<option value="1846">test  xxxx1234</option>
<option value="1962">test2  xxxx3456</option>
</select>

Answer 1

$("select[name='CCards'] option:selected")应该做的伎俩

有关更多详细信息，请参阅jQuery文档：http://api.jquery.com/selected-selector/

更新：如果您需要所选选项的索引，则需要使用.index() jquery方法：

$("select[name='CCards'] option:selected").index()

Answer 2

这将获得所选选项的索引：

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

Answer 3

如果您实际上在寻找所选选项的索引号（而不是值），那么它将是

document.forms[0].elements["CCards"].selectedIndex 
/* You may need to change document.forms[0] to reference the correct form */

或使用jQuery

$('select[name="CCards"]')[0].selectedIndex

Answer 4

实际索引可用作select元素的属性。

var sel = document.getElementById('CCards');
alert(sel.selectedIndex);

您可以使用索引进入选择选项，您可以在其中提取文本和值。

var opt = sel.options[sel.selectedIndex];
alert(opt.text);
alert(opt.value);

Answer 5

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

Answer 6

您还可以将:checked用于<select>元素

如，

document.querySelector('select option:checked')
document.querySelector('select option:checked').getAttribute('value')

您甚至不必获取索引，然后通过其兄弟索引引用该元素。

如何获取下拉列表的选定索引

6 个答案: