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

Если у вас есть элемент выбора, который выглядит так:

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

Сделал бы strUser 2. Если вы действительно хотите test2, сделайте следующее:

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

Что сделало бы strUser test2

Обычный 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

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.

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

Рабочий Javascript & jQuery 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()">

Следующий скрипт получает значение выбранного параметра и помещает его в текстовое поле 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>

Если вы когда-нибудь столкнетесь с кодом, написанным исключительно для Internet Explorer, вы можете увидеть следующее:

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

Выполнение вышеуказанного в Firefox и др. Выдаст ошибку «не является функцией», потому что Internet Explorer позволяет вам обойтись без использования () вместо []:

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>

Любое поле ввода / формы может использовать ключевое слово «this», когда вы обращаетесь к нему изнутри элемента. Это избавляет от необходимости находить форму в dom-дереве, а затем размещать этот элемент внутри формы.

Это можно сделать двумя способами: с помощью 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'

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

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

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

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

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

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

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

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

Предыдущие ответы все еще оставляют место для улучшения из-за возможностей, интуитивности кода и использования 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, и его следует использовать. Наконец, помните, что в некоторых местах используются квадратные скобки, а не круглые. Как было объяснено ранее, только (более старые версии) Internet Explorer будет принимать круглые во всех местах.

Используя jQuery:

$('select').val();

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

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

Самый простой способ сделать это:

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

Запущенный пример того, как это работает:

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.

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

Например,

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

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

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

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

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

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

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

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

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

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

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

д. параметры .selectedIndex

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

var x = document.form1.list.value;

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

В более современных браузерах querySelector позволяет нам получить выбранный параметр в одном операторе, используя _ 2_ псевдокласс. Из выбранного варианта мы можем собрать любую информацию, которая нам нужна:

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Для этого вы должны использовать querySelector. Это также стандартизирует способ получения значения от элементов формы.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Сценарий: https://jsfiddle.net/3t80pubr/

Пытаться

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

event.target.value внутри обратного вызова onChange помог мне.

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

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

Я думаю, вы можете прикрепить прослушиватель событий к самому тегу select, например:

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

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

Я не знаю, правильно ли я понял вопрос, но у меня это сработало: используйте событие onchange () в своем html, например.

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

// javascript

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

Это даст вам любое значение в раскрывающемся списке выбора за клик.

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

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

Сделайте раскрывающееся меню с несколькими вариантами (сколько угодно!)

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

Я немного повеселился. Вот фрагмент кода:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

ура, фрагмент сработал