Получить выбранное значение в раскрывающемся списке с помощью 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
• значение = привет
• Текст = Привет, Мир

в следующем коде представлены различные примеры, связанные с получением / вводом значений из полей ввода / выбора с помощью 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 et al даст вам ошибку "не является функцией", потому что 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\'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>

live demo:http://jsbin.com/jiwena/1/edit?html, выход .

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

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

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

$(‘select’).val();

можно использовать querySelector.

Э. Г.

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

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

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

e.опции.свойства selectedIndex

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

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

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

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

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

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

запуск примера того, как это работает:

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.

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

var x = document.form1.list.value;

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

другое решение-это :

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

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

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

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

<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