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

Ответ 1

Используйте для этого либо 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());
})

Ответ 2

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

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;

Ответ 3

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

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

Ответ 4

Если вы используете эту функцию и не хотите, чтобы прослушиватель событий был атрибутом, используйте:

document.getElementById('select_id').addEventListener('change', function(){
    this.value;
});

Ответ 5

Ничего себе, пока нет действительно многоразовых решений среди ответов... Я имею в виду, что стандартный обработчик событий должен получать только аргумент event и вообще не должен использовать идентификаторы. Я бы использовал:

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)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

JQuery:

jQuery('#select_id').on('change',handleSelectChange);

или установка обработчика vanilla JS:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

И не нужно переписывать это для каждого select элемента.

Пример фрагмента:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Ответ 6

Используйте

document.getElementById("select_id").selectedIndex

Или получить значение:

document.getElementById("select_id").value

Ответ 7

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

в предупреждении вы увидите значение INT выбранного индекса, трактуете выделение как массив и получите значение

Ответ 8

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}

Ответ 9

Интересно, что все опубликовали о value и text параметре, чтобы получить из <option> и никто не предложил label.

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

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

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

Чтобы получить text option (например, Связь или -Select-)

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">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText>Communication</option>
</select>

Примечание. В приведенном выше HTML- коде для значения option 2 label будет возвращать новый текст вместо сообщения

Также

Примечание. Невозможно установить свойство label в Firefox (только возврат).

Ответ 10

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

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

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

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

Ответ 11

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">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

Ответ 12

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">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

Ответ 13

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

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

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

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

Ответ 14

let dropdown = document.querySelector('select');
dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});