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

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

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

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

答案

如果您具有如下所示的 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:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery 的:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS :( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];
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

以下代码展示了与使用 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>
var selectedValue = document.getElementById("ddlViewBy").value;

如果您曾经运行过纯粹为 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;

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

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

从元素内部访问任何输入 / 表单字段时,都可以使用 “this” 关键字。这样就无需在 dom 树中定位表单,然后在表单中定位此元素。

初学者可能希望使用 NAME 属性而不是 ID 属性访问选择的值。我们知道所有表单元素都需要名称,甚至在获得 ID 之前也是如此。

因此,我只为新开发人员添加了getElementByName()解决方案。

注意表单元素的名称将必须唯一,以使表单一旦发布即可使用,但是 DOM 可以允许一个以上的元素共享一个名称。因此,请考虑是否向表单添加 ID,或者使用表单元素名称my_nth_select_named_xmy_nth_text_input_named_y明确指定my_nth_text_input_named_y

使用getElementByName示例:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

只需使用

  • $('#SelectBoxId option:selected').text();用于获取列出的文本

  • $('#SelectBoxId').val();用于获取选定的索引值

有两种方法可以使用 JavaScript 或 jQuery 完成此任务。

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

要么

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'