首页 文章

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

提问于
浏览
1450

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

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

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

22 回答

  • 50

    这是在onchange函数中执行此操作的简单方法:

    event.target.options[event.target.selectedIndex].dataset.name

  • 18

    初学者可能希望使用NAME属性而不是ID属性来访问select中的值 . 我们知道所有表单元素都需要名称,甚至在它们获得ID之前 .

    所以,我正在为新开发人员添加 getElementByName() 解决方案 .

    NB . 表单元素的名称必须是唯一的,表单一旦发布就可以使用,但DOM可以允许名称由多个元素共享 . 因此,如果可以,请考虑向表单添加ID,或者明确表单元素名称 my_nth_select_named_xmy_nth_text_input_named_y .

    使用 getElementByName 的示例:

    var e = document.getElementByName("my_select_with_name_ddlViewBy");
    var strUser = e.options[e.selectedIndex].value;
    
  • -1
    var selectedValue = document.getElementById("ddlViewBy").value;
    
  • 2

    由于可能性,代码的直观性以及 idname 的使用,之前的答案仍有待改进的空间 . 可以读出所选选项的三个数据 - 索引号,值和文本 . 这个简单的跨浏览器代码可以完成所有三个:

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

    现场演示:http://jsbin.com/jiwena/1/edit?html,output .

    id 应该用于化妆目的 . 出于功能形式的目的, name 仍然有效,同样在HTML5中,仍然应该使用 . 最后,请注意在某些地方使用正方形与圆形括号 . 如前所述,只有(旧版本)IE将在所有地方接受圆形 .

  • 2

    为了得到上述答案,这就是我作为一个单行的方式 . 这是为了获取所选选项的实际文本 . 已经有很好的例子来获取索引号 . (对于文本,我只是想以这种方式显示)

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

    在极少数情况下,您可能需要使用括号,但这种情况非常罕见 .

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

    我怀疑这个过程比两行版本更快 . 我只想尽可能地整合我的代码 .

    如果有人知道如何在一行中完成这一操作而不必两次获得该元素,我很乐意为您发表评论并告诉我如何 . 我还没弄清楚......

  • 8

    只是用

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

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

  • 3

    运行如何工作的示例:

    var e = document.getElementById("ddlViewBy");
    var val1 = e.options[e.selectedIndex].value;
    var txt = e.options[e.selectedIndex].text;
    
    document.write("
    Selected option Value: "+ val1); document.write("
    Selected option Text: "+ txt);
    <select id="ddlViewBy">
      <option value="1">test1</option>
      <option value="2">test2</option>
      <option value="3"  selected="selected">test3</option>
    </select>
    

    注意:值不会随着下拉列表的更改而更改,如果您需要该功能,则需要实现onClick更改 .

  • 161
    <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>
    
  • 3

    这是一个JavaScript代码行:

    var x = document.form1.list.value;
    

    假设名为list name="list" 的下拉菜单包含在名称属性为 name="form1" 的表单中 .

  • 13

    我有点不同的看法,如何实现这一目标 . 我通常使用以下方法执行此操作:(就我所知,它更简单,适用于所有浏览器 . )

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

    您可以使用 selectElement.value 获取所选选项的值 .

    document.getElementById("idOfSelect").value;
    
    var res = document.querySelector('p');
    var select = document.querySelector('select');
    res.textContent = "Selected Value: "+select.value;
    select.addEventListener("change", function(e){
      res.textContent = "Selected Value: "+select.value;
    });
    
    <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>
    Change value of the select to show the value.
    <p>
    </p>
    
  • 0

    请参阅文章Selecting dropdown element using JavaScript or jQuery . 他们使用JavaScript和jQuery以多种方式解释了它 .

    使用jQuery:

    $(‘select’).val();
    
  • 29

    你可以使用 querySelector .

    E.g.

    var myElement = document.getElementById('ddlViewBy');
    
    var myValue = myElement.querySelector('[selected]').value;
    
  • 1

    普通的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").val(); // The value of the selected option
    

    AngularJS:(104473):

    // 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'
    }];
    
  • 303

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

    Sorurce Link

    工作Demo

    <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()">
    

    The following script is getting the value of the selected option and putting it in text box 1

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

    The following script is getting a value from a text box 2 and alerting with its value

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

    The following script is calling a function from a function

    <script>
        function up() {
            var dop = document.getElementById("srt").value;
            pop(dop); // Calling function pop
        }
    
        function pop(val) {
            alert(val);
        }?
    </script>
    
  • 12
    var strUser = e.options[e.selectedIndex].value;
    

    这是正确的,应该给你 Value . 这是你要追求的文字吗?

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

    所以你对术语很清楚:

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

    此选项包括:

    • 指数= 0

    • Value =你好

    • Text = Hello World

  • 6

    我能看到这个代码不起作用的唯一原因是你使用的是IE7-,而忘了为你的 <option> -tags指定value属性...其他每个浏览器都应该将open-close标签中的内容转换为选项值 .

  • 3

    2015年,在Firefox,以下也有效 .

    e.options.selectedIndex

  • 2

    有两种方法可以使用 JavaScriptJQuery 完成此操作 .

    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'
    
  • 11

    如果您遇到纯粹为IE编写的代码,您可能会看到:

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

    在Firefox等运行上面的内容会给你一个'不是函数'的错误,因为IE允许你使用()而不是[]来逃避:

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

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

  • 2448

    如果你有一个如下所示的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

  • 0

    另一个解决方案是

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

相关问题