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

使用JavaScript获取下拉列表中的选定值
javascript
使用JavaScript获取下拉列表中的选定值,javascript,html-select,Javascript,Html Select,如何使用JavaScript从下拉列表中获取所选值我尝试了以下方法，但它们都返回选定的索引而不是值： var e=document.getElementById（“ddlViewBy”）；函数show（）{ var as=document.forms[0].ddlViewBy.value； var strUser=e.options[e.selectedIndex].value；控制台日志（as、strUser）； } e、 onchange=show； show（）测试1 测试2
如何使用JavaScript从下拉列表中获取所选值
我尝试了以下方法，但它们都返回选定的索引而不是值：
var e=document.getElementById（“ddlViewBy”）；
函数show（）{
var as=document.forms[0].ddlViewBy.value；
var strUser=e.options[e.selectedIndex].value；
控制台日志（as、strUser）；
}
e、 onchange=show；
show（）

测试1
测试2
测试3
如果选择的元素如下所示：

测试1
测试2
测试3

运行此代码：
var e=document.getElementById（“ddlViewBy”）；
var strUser=e.值；

将使strUser
成为2
。如果实际需要的是test2
，请执行以下操作：
var e=document.getElementById（“ddlViewBy”）；
var strUser=e.options[e.selectedIndex].text；

这将使strUser
成为test2

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

这是正确的，应该为您提供值。
是你要找的文本吗
var strUser = e.options[e.selectedIndex].text;

所以你对术语很清楚：
<select>
    <option value="hello">Hello World</option>
</select>


你好，世界

此选项有：

索引=0
Value=hello
Text=你好，世界
初学者可能希望使用NAME属性而不是ID属性从select访问值。我们知道所有表单元素都需要名称，甚至在它们获得ID之前
因此，我添加了getElementsByName（）
解决方案，供新开发人员查看
注意。表单元素的名称必须是唯一的，以便表单在发布后可用，但DOM允许一个名称由多个元素共享。因此，可以考虑在表单元素中添加IDS，或者用表单元素名称<代码> MySnthHythOntEntEdEx x/<代码>和<代码> MyNththTrimeToPixNoPIDEXY 
使用getElementsByName
的示例：
var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

纯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

：（）：
//HTML
文本：{{selectItem.Text}
值：{{selectItem.Value}
//JavaScript
$scope.items=[{
值：'item_1_id'，
正文：“项目1”
}, {
值：'item_2_id'，
正文：“项目2”
}];
如果您遇到纯粹为InternetExplorer编写的代码，您可能会看到：
var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

在Firefox等中运行上述命令会出现“不是函数”错误，因为InternetExplorer允许您使用（）而不是[]：
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

正确的方法是使用方括号。
下面的代码展示了使用JavaScript从输入/选择字段获取/放置值的各种示例

工作



挑选
文本1
文本2
文本3



TextBox1



TextBox2


以下脚本正在获取所选选项的值并将其放入文本框1
<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>


函数运行（）{
document.getElementById（“srt”）.value=document.getElementById（“Ultra”）.value；
}

以下脚本正在从文本框2获取一个值，并使用其值发出警报
<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>


函数up（）{
//if（document.getElementById（“srt”）.value！=“”）{
var dop=document.getElementById（“srt”）.value；
//}
警报（dop）；
}

以下脚本正在从函数调用函数
<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>


函数up（）{
var dop=document.getElementById（“srt”）.value；
pop（dop）；//调用函数pop
}
函数pop（val）{
警报（val）；
}?
只需使用

$（'#SelectBoxId选项：selected'）。text（）用于获取列出的文本

$（'#SelectBoxId'）.val（）

这里有一个简单的方法可以在onchange函数中实现：
event.target.options[event.target.selectedIndex].dataset.name

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

挑选
文本1
文本2
文本3

从元素内部访问任何输入/表单字段时，都可以使用“this”关键字。这样就不需要在dom树中定位表单，然后再在表单中定位此元素。
前面的答案仍然有改进的余地，因为有可能，代码的直观性，以及使用id
与name
相比。可以读取所选选项的三个数据——其索引号、值和文本。这段简单的跨浏览器代码完成了以下三项功能：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>


演示GetSelectOptionData
选择：
选择1
选择2
选择3



函数showData（）{
var theSelect=demoForm.demoSelect；
var firstP=document.getElementById（'firstP'）；
var secondP=document.getElementById（'secondP'）；
var thirdP=document.getElementById（'thirdP'）；
firstP.innerHTML=（'此选项的索引号为：'+theSelect.selectedIndex+'（Javascript索引号从0开始）'）；
secondP.innerHTML=（“其值为：”+theSelect[theSelect.selectedIndex].value）；
thirdP.innerHTML=（“其文本为：”+theSelect[theSelect.selectedIndex].text）；
}

现场演示：
id
应用于化妆目的。出于函数形式的目的，name
仍然有效，在HTML5中也是如此，应该继续使用。最后，注意在某些地方使用方括号和圆括号。如前所述，只有（较旧版本的）InternetExplorer在所有地方都会接受圆形
e、 选项。选择索引
使用jQuery：
$('select').val();

下面是JavaScript代码行：
var x = document.form1.list.value;

假设名为listname=“list”的下拉菜单包含在带有
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

$('select').val();

var x = document.form1.list.value;

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

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

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

document.getElementById('elementId').selectedOptions[0].value

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

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

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

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

function selectNum(){
    var strUser = numberToSelect.value;
}

var value = document.getElementById("selectId").value;

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>