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

Question

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

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

2368

javascript html-select

Источник

user127986 06 июл '09 в 07:25

35 ответов

Решение

Простой 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'
}];

474

Источник

user288671 18 дек '11 в 02:08

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

197

Источник

user24181 06 июл '09 в 07:29

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

72

Источник

user1045296 03 дек '12 в 06:50

var selectedValue = document.getElementById("ddlViewBy").value;

55

Источник

user1107132 25 окт '13 в 13:27

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

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

27

Источник

user1400368 18 июн '12 в 15:28

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

22

Источник

user3254405 14 апр '15 в 13:45

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

19

Источник

user3600553 23 июл '18 в 13:18

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

18

Источник

user650855 09 мар '11 в 03:32

Я не знаю, правильно ли я понял вопрос, но у меня это сработало: использование события 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;
}

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

15

Источник

user11118521 29 янв '20 в 16:23

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

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

15

Источник

user1482606 18 фев '14 в 11:01

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

Используя jQuery:

$(‘select’).val();

9

Источник

25 май '16 в 18:42

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

9

Источник

user2056165 22 май '15 в 02:42

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

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

8

Источник

user9172501 18 июл '18 в 18:49

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

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

8

Источник

user2795762 01 апр '20 в 15:34

Ты можешь использовать querySelector,

Например

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

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

7

Источник

user3897775 04 янв '18 в 22:36

Большинство ответов здесь получают значение «этого» меню выбора onchangeс помощью простого текстового селектора JavaScript.

Например:

      document.getElementById("ddlViewBy").value;

Это не СУХОЙ подход.

СУХОЙ (3 строки кода):

      function handleChange(e) {
  let innerText = e.target[e.target.options.selectedIndex].innerText;
  let value = e.target.value;
  /* Do something with these values */
}

Получите первый вариант выбора:

      console.log(e.target[0]); /*output: <option value="value_hello">Hello innerText</option>*/

Имея в виду эту идею, мы динамически возвращаем «этот» элемент выбора (по selectedIndex):

      e.target[e.target.options.selectedIndex].innerText;

ДЕМО

7

Источник

user9291557 07 май '22 в 13:51

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

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.

6

Источник

user2142994 02 авг '17 в 13:19

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

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

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

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

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

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

5

Источник

user2755522 12 май '17 в 16:25

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

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>

5

Источник

user215552 08 июн '20 в 23:50

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

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

5

Источник

user4579097 12 окт '18 в 11:39

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

4

Источник

user399940 22 апр '21 в 06:50

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

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

4

Источник

user2991800 22 окт '15 в 22:38

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

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

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

4

Источник

user12099237 20 июл '20 в 23:06

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

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

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

3

Источник

user664047 17 янв '20 в 02:39

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

var x = document.form1.list.value;

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

3

Источник

user6815323 27 фев '17 в 21:04

Пытаться

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>

2

Источник

user860099 18 дек '19 в 23:19

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

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

1

Источник

user6137333 22 дек '18 в 15:03

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

1

Источник

user59242 06 июл '09 в 07:33

      <select name="test" id="test" >
    <option value="1" full-name="Apple">A</option>
    <option value="2" full-name="Ball">B</option>
    <option value="3" full-name="Cat" selected>C</option>
</select>

var obj  = document.getElementById('test');
obj.options[obj.selectedIndex].value;  //3
obj.options[obj.selectedIndex].text;   //C
obj.options[obj.selectedIndex].getAttribute('full-name'); //Cat
obj.options[obj.selectedIndex].selected; //true

1

Источник

user2583175 26 апр '22 в 10:44

Другие вопросы по тегам javascript html-select

user16417 06 июл '09 в 07:29 2009-07-06 07:29 · Accepted Answer · 2009-07-06 07:29

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