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

Обычный 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'
}];

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.

Ссылка на источник

Рабочая Демо

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

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

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

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

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

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

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

Начинающие, вероятно, захотят получить доступ к значениям из атрибута 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;

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

Live demo: http://jsbin.com/jiwena/1/edit?html,output.

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

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

например.

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

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

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

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

$(‘select’).val();

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

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.

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

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

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

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

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

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

В 2015 году в Firefox выполняется следующее.

е. опции.selectedIndex

Есть два способа сделать это с помощью 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'

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

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

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

var x = document.form1.list.value;

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

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

Просто сделайте: document.getElementById('idselect').options.selectedIndex

Затем вы получите значение индекса, начиная с 0.

Вы можете просто использовать selectElement.value чтобы получить значение выбранного параметра select.

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>

У меня немного другое мнение, как этого добиться. Обычно я делаю это со следующим подходом: (Это более простой способ и работает с каждым браузером, насколько я знаю).

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

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

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