如何使用JavaScript从下拉列表中获取所选值?

<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>


当前回答

按照前面的回答,这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。(对于文本,我只是想展示一下)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

在一些罕见的情况下,您可能需要使用括号,但这非常罕见。

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。

不幸的是,这仍然会获取两次元素,这并不理想。一个只抓取一次元素的方法会更有用,但我还没有弄清楚,关于用一行代码来实现这一点。

其他回答

有一个解决方法,使用EasyUI框架及其所有插件。

您只需要在下拉菜单中添加一些EasyUI对象,该对象可以作为“桥”从输入中读取。

示例:easyui搜索框

左边是下拉列表,右边是easyui搜索框:

...
<input id="ss" class="easyui-searchbox" style="width:300px"
        data-options="  searcher:my_function,
                        prompt:'Enter value',
                        menu:'#mm'">
<div id="mm" style="width:200px">
    <div data-options="name:'1'">test1</div>
    <div data-options="name:'2'">test2</div>
</div>
...
...
<script type="text/javascript">
    function my_js_function(triggeredByButton = false){
        // normal text of the searchbox (what you entered)
        var value = $("#ss").searchbox("getValue");
        // what you chose from the drop-down menu
        var name = $("#ss").searchbox("getName");
...

注意:var名称是“1”或“2”,即“下拉列表的值”,而var值是在easyui搜索框中输入的值,如果您只想知道下拉列表的数值,则不相关。

我检查了EasyUI如何获取这个#mm名称,如果没有EasyUI的帮助,我无法找到如何获取这个名称。getName后面的jQuery:

getName:function(jq){
return $.data(jq[0],"searchbox").searchbox.find("input.textbox-value").attr("name");
}

注意,此函数的返回不是easyui搜索框的值,而是用作easyui查询框菜单参数的#mm下拉列表的名称。不知何故,EasyUI必须获得其他值,因此它必须是可能的。

如果您不想看到任何插件,请尽可能缩小它?或者在上面的链接中找到一个根本不需要表单的插件,我只是没有花时间。

我认为您可以将事件侦听器附加到select标记本身,例如:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

在这种情况下,您应该确保所有选项都有一个value属性,并且它们不为空。

<select name="test" id="test" >
    <option value="1" full-name="Apple">A</option>
    <option value="2" full-name="Ball">B</option>
    <option value="3" full-name="Cat" selected>C</option>
</select>

var obj  = document.getElementById('test');
obj.options[obj.selectedIndex].value;  //3
obj.options[obj.selectedIndex].text;   //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

只需使用

$('#SelectBoxId选项:selected').text();获取列出的文本$('#SelectBoxId').val();用于获取所选索引值

var selectedValue = document.getElementById("ddlViewBy").value;