Получение выбранного значения/текста из Select при изменении

 
<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

Мне нужно получить значение выбранной опции в javascript: кто-нибудь знает, как получить выбранное значение или текст, пожалуйста, скажите, как написать функцию для этого. Я назначил функцию onchange() для select, что мне делать после этого?

bhansa
Редактировал вопрос 1-го ноября 2017 в 6:10
Программирование
javascript
24-го марта 2011 в 8:54
43 просмотров
Комментарии к вопросу (2)

Используйте для этого JavaScript или jQuery.

Использование JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

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

$('#select_id').change(function(){
    alert($(this).val());
})
YakovL
Редактировал ответ 3-го марта 2018 в 9:15
Комментарии (6)

Нет необходимости в функции onChange, после. Вы можете получить значение в одной строке:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

Или, разделить его для лучшей читаемости:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;
Комментарии (0)

в 

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}

<select onchange="test(this)" id="select_id">
    -Select-
    Communication
    Communication
    Communication
YakovL
Редактировал ответ 8-го апреля 2019 в 1:22
Комментарии (4)

Если вы'вновь погуглив, и Дон'т хотим, чтобы слушатель события, чтобы быть атрибутом, используйте:

document.getElementById('select_id').addEventListener('change', function(){
    this.value;
});
Комментарии (0)

Ух-ты, действительно многоразовые решений, среди ответов пока нет.. я имею ввиду, что обработчик стандарт случае должны сделать единственный аргумент наступлении "события", а не'т должны использовать идентификаторы на всех.. я'd с помощью:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

Вы можете использовать этот обработчик с каждого – рядный JS:


<select onchange="handleSelectChange(event)">
    one
    two
YakovL
Редактировал ответ 6-го апреля 2019 в 11:25
Комментарии (1)

Используйте

document.getElementById("select_id").selectedIndex

Или для получения значения:

document.getElementById("select_id").value
Комментарии (1)

HTML-код:


<select onchange="cityChanged(this.value)">
      Chicago
      New York
Комментарии (0)

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    -Select-
    Communication
    Communication
    Communication
YakovL
Редактировал ответ 3-го марта 2018 в 9:13
Комментарии (0)

Это старый вопрос, но я не уверен, почему люди не'т предлагаем использовать объект события, чтобы получить информацию, а не искать снова через дом.

Просто зайдите через объект события в вашей функции onChange, после чего, см. пример ниже

тест функция() { консоль.журнал(событие.srcElement.значение); }`

[http://jsfiddle.net/Corsico/3yvh9wc6/5/][1]

Может быть полезно для людей, ищущих это сегодня, если бы это было'т поведение по умолчанию 7 лет назад

Комментарии (0)

Интересно, что каждый пишет о "значение" и "текст" вариант, чтобы получить от в <параметр> и никто не предложилметка`.

Поэтому я предлагаю метка тоже, как поддерживается всеми браузерами

Чтобы получить "значение" (так же, как другие предлагали)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

Чтобы получить вариант текст (т. е. связь или -выберите-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

Или (новое предложение)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

В формате HTML


<select onchange="test(this)" id="select_id">
    -Select-
    Communication
    Communication
Комментарии (0)

в 

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  -Select-
  Communication
Комментарии (0)
let dropdown = document.querySelector('select');
dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});
Комментарии (0)

Я попытался объяснить мои собственные образцы, но я надеюсь, что это поможет вам. Вы Don'т нужна onChange, после чего=то"Тест () на" Пожалуйста, выполните фрагмент кода для получения живого результата.

в 

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  BMW
  Mercedes
  Volkswagen
  Audi
Ayaz
Редактировал ответ 16-го декабря 2018 в 9:37
Комментарии (3)

в 

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  -Select-
  Communication
YakovL
Редактировал ответ 3-го марта 2018 в 9:12
Комментарии (0)