javascript - список - получить значение select js




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

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

е. опции .selectedIndex

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

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

Рабочий 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>

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

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


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

Например

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

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

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

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

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


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

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

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

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

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

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



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

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

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

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

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

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


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

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






html-select