如何使用JavaScript从下拉列表中获取所选值?
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
如何使用JavaScript从下拉列表中获取所选值?
<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>
当前回答
只需执行:document.getElementById('dselect').options.selectedIndex
然后,您将获得从0开始的select索引值。
其他回答
对于如何实现这一点,我有一点不同的看法。我通常使用以下方法(这是一种更简单的方法,而且据我所知,它适用于所有浏览器):
<select onChange="functionToCall(this.value);" id="ddlViewBy">
<option value="value1">Text one</option>
<option value="value2">Text two</option>
<option value="value3">Text three</option>
<option value="valueN">Text N</option>
</select>
使用jQuery:
$('select').val();
初学者可能希望使用NAME属性而不是ID属性访问select中的值。我们知道所有表单元素都需要名称,甚至在获得id之前。
因此,我将添加getElementsByName()解决方案,让新开发人员也能看到。
没有。表单元素的名称需要是唯一的,以便表单在发布后可以使用,但DOM可以允许多个元素共享名称。因此,如果可以,请考虑将ID添加到表单中,或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式添加ID。
使用getElementsByName的示例:
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;
制作一个包含多个选项的下拉菜单(根据需要选择多个!)
<select>
<option value="giveItAName">Give it a name
<option value="bananaShark">Ridiculous animal
<ooption value="Unknown">Give more options!
</select>
我把它弄得有点滑稽。
下面是代码段:
<选择><option value=“RidicousObject”>香蕉鲨<option value=“SuperDuperCoding”>选择标记和选项标记!<option value=“未知”>添加更多标签以添加更多选项!</选择><h1>仅1个选项(无用)</h1><选择><option value=“Single”>单一选项</选择>
是的,片段奏效了。
有两种方法可以使用JavaScript或jQuery完成此操作。
JavaScript:
var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;
alert (getValue); // This will output the value selected.
OR
var ddlViewBy = document.getElementById('ddlViewBy');
var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;
var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;
alert (value); // This will output the value selected
alert (text); // This will output the text of the value selected
jQuery:
$("#ddlViewBy:selected").text(); // Text of the selected value
$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'