使用JavaScript在下拉列表中获取选定的值

JavaScript

梅A飞云

2020-03-09

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

我尝试了下面的方法,但是它们都返回选择的索引而不是值:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

第226篇《使用JavaScript在下拉列表中获取选定的值》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
GilJinJin 2020.03.09

Try

ddlViewBy.value

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );
<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

A十三 2020.03.09

Here is a JavaScript code line:

var x = document.form1.list.value;

Assuming that the dropdown menu named list name="list" and included in a form with name attribute name="form1".

神离伊芙妮 2020.03.09

In 2015, in Firefox, the following also works.

e.options.selectedIndex

TomTony 2020.03.09
<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Any input/form field can use a “this” keyword when you are accessing it from inside the element. This eliminates the need for locating a form in the dom tree and then locating this element inside the form.

阿飞小哥 2020.03.09
var selectedValue = document.getElementById("ddlViewBy").value;
ProTony 2020.03.09

如果您曾经运行过纯粹为Internet Explorer编写的代码,则可能会看到以下内容:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

在Firefox等中运行上述命令将给您一个“不是函数”错误,因为Internet Explorer允许您摆脱使用()而不是[]的麻烦:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

正确的方法是使用方括号。

SamStafan十三 2020.03.09

以下代码展示了与使用JavaScript从输入/选择字段获取/输入值有关的各种示例。

源链接

工作的Javascript和jQuery演示

在此处输入图片说明

在此处输入图片说明

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

以下脚本获取所选选项的值并将其放在文本框1中

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

以下脚本从文本框2获取值并使用其值进行警报

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

以下脚本正在从函数调用函数

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>
null 2020.03.09
var strUser = e.options[e.selectedIndex].value;

这是正确的,应该会给您带来价值。是您要的文字吗?

var strUser = e.options[e.selectedIndex].text;

所以您在术语上很清楚:

<select>
    <option value="hello">Hello World</option>
</select>

该选项具有:

  • 索引= 0
  • 值=你好
  • 文字= Hello World
小宇宙LEY 2020.03.09

如果您有一个如下所示的select元素:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

运行此代码:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

strUser成为2如果您真正想要的是test2,请执行以下操作:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

这将strUser成为test2

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android