Получить выбранное значение в выпадающем списке с помощью JavaScript?

Как получить выбранное значение из выпадающего списка с помощью 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;
 
вопрос задан 6.07.2009
Fire Hand
7974 репутация

20 ответов


  • 2389 рейтинг

    Если у вас есть элемент 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

    ответ дан Paolo Bergantino, с репутацией 366973, 6.07.2009
  • 293 рейтинг

    Обычный 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 : ( 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'
    }];
     
    ответ дан Vitalii Fedorenko, с репутацией 66689, 18.12.2011
  • 159 рейтинг
     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
    ответ дан Greg, с репутацией 248407, 6.07.2009
  • 48 рейтинг

    В следующем коде представлены различные примеры, связанные с получением /помещением значений из полей ввода /выбора с использованием JavaScript.

    Рабочий ДЕМО

      <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>
     
    ответ дан Code Spy, с репутацией 2916, 3.12.2012
  • 26 рейтинг
    var selectedValue = document.getElementById("ddlViewBy").value;
    
    ответ дан Mohammad Faisal, с репутацией 1353, 25.10.2013
  • 18 рейтинг

    Если вы когда-либо сталкиваетесь с кодом, написанным исключительно для 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; 
     

    Правильный способ - использовать квадратные скобки.

    ответ дан Carl Onager, с репутацией 2951, 18.06.2012
  • 12 рейтинг

    Просто используйте

    • $('#SelectBoxId option:selected').text(); для получения текста в списке

    • $('#SelectBoxId').val(); для получения выбранного значения индекса

    ответ дан Marvil Joy, с репутацией 546, 18.02.2014
  • 12 рейтинг
    <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>
    
    ответ дан numbtongue, с репутацией 518, 14.04.2015
  • 11 рейтинг

    Начинающие, вероятно, захотят получить доступ к значениям из атрибута select с атрибутом NAME, а не с атрибутом ID. Мы знаем, что все элементы формы нуждаются в именах, даже до того, как они получают идентификаторы.

    Итак, я добавляю решение getElementByName() только для новых разработчиков.

    NB. имена элементов формы должны быть уникальными для того, чтобы ваша форма могла быть использована после публикации, но DOM может разрешить совместное использование имени более чем одним элементом. По этой причине рассмотрите возможность добавления идентификаторов к формам, если можете, или явным образом с именами элементов формы my_nth_select_named_x и my_nth_text_input_named_y .

    Пример использования getElementByName :

     var e = document.getElementByName("my_select_with_name_ddlViewBy");
    var strUser = e.options[e.selectedIndex].value;
     
    ответ дан Ben Greenaway, с репутацией 111, 9.03.2011
  • 8 рейтинг

    Предыдущие ответы по-прежнему оставляют место для улучшения из-за возможностей, интуитивности кода и использования 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>
     

    Живая демонстрация: http://jsbin.com/jiwena/1/edit?html,output .

    id следует использовать для макияжа. Для целей функциональной формы name все еще действует, также в HTML5, и его все равно следует использовать. Наконец, обратите внимание на квадрат использования в сравнении с круглыми скобками в определенных местах. Как было объяснено ранее, только (более старые версии) IE будут принимать круглые во всех местах.

    ответ дан Frank Conijn, с репутацией 1663, 22.05.2015
  • 6 рейтинг

    См. Статью Выбор выпадающего элемента с помощью JavaScript или jQuery . Они объяснили это разными способами с помощью JavaScript и jQuery.

    Использование jQuery:

     $(‘select’).val();
     
    ответ дан does_not_exist, с репутацией , 25.05.2016
  • 6 рейтинг

    Вы можете использовать querySelector .

    Например

     var myElement = document.getElementById('ddlViewBy');
    
    var myValue = myElement.querySelector('[selected]').value;
     
    ответ дан Rounin, с репутацией 12143, 4.01.2018
  • 3 рейтинг

    Запуск примера того, как он работает:

     var e = document.getElementById("ddlViewBy");
    var val1 = e.options[e.selectedIndex].value;
    var txt = e.options[e.selectedIndex].text;
    
    document.write("<br />Selected option Value: "+ val1);
    document.write("<br />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.

    ответ дан Ani Menon, с репутацией 14956, 2.08.2017
  • 3 рейтинг

    Чтобы согласиться с приведенными выше ответами, я так делаю это как однострочный. Это для получения фактического текста выбранной опции. Есть хорошие примеры для получения номера индекса. (И для текста я просто хотел показать этот путь)

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

    В некоторых редких случаях вам может понадобиться использовать круглые скобки, но это будет очень редко.

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

    Я сомневаюсь, что это происходит быстрее, чем двухстрочная версия. Мне просто нравится как можно больше консолидировать мой код.

    Если кто-нибудь знает, как сделать это в одной строке, не получив элемент дважды, я хотел бы, чтобы вы прокомментировали и покажите мне, как это сделать. Я еще не смог понять это ...

    ответ дан Genko, с репутацией 256, 12.05.2017
  • 3 рейтинг

    В 2015 году в Firefox также работает следующее.

    е. опции .selectedIndex

    ответ дан Hector Llorens, с репутацией 87, 22.10.2015
  • 2 рейтинг

    Другое решение:

     document.getElementsById('elementId').selectedOptions[0].value
     
    ответ дан JworKer, с репутацией 109, 18.07.2018
  • 2 рейтинг

    Есть два способа сделать это, используя JavaScript или JQuery .

    JavaScript:

     var getValue = document.getElementsById('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'
     
    ответ дан Dulith De Cozta, с репутацией 3768, 23.07.2018
  • 2 рейтинг

    Вот код кода JavaScript:

     var x = document.form1.list.value;
     

    Предполагая, что выпадающее меню с именем list name="list" и включено в форму с атрибутом имени name="form1" .

    ответ дан Belgacem Ksiksi, с репутацией 74, 27.02.2017
  • 1 рейтинг

    Единственная причина, по которой я могу видеть, что этот код не работает, - это использовать IE7- и забыл указать атрибут value для ваших <option> тэгов ... Каждый другой браузер должен преобразовать то, что находится внутри тегов open-close, в качестве опции стоимость.

    ответ дан peirix, с репутацией 17785, 6.07.2009
  • -1 рейтинг

    Вот простой способ сделать это в функции onchange:

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

    ответ дан zackify, с репутацией 2230, 16.04.2014