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

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

Я попробовал методы ниже, но все они возвращают выбранный индекс вместо значения:

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

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

Простой 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
• Значение = привет
• Текст = Hello World

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

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

Рабочая Javascript и JQuery Демо

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

Если вы когда-нибудь сталкивались с кодом, написанным исключительно для 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, а затем размещения этого элемента внутри формы.

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

Есть два способа сделать это, используя 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'

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

• $('#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 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>

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

е. options .selectedIndex

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

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

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

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

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

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

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

var x = document.form1.list.value;

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

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

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

Скрипка: https://jsfiddle.net/3t80pubr/

Я не знаю, если я тот, кто не правильно понял вопрос, но это просто сработало для меня: использование события 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 sele(){
    var strUser = numberToSelect.value;
}

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

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

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

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

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

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

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

Пытаться

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>

Сделайте выпадающее меню с несколькими опциями (столько, сколько хотите!)

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

уя сниппет сработал