Javascript 从 Select on change 获取选定的值/文本

Get selected value/text from Select on change

提问by Siva

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

I need to get the value of the selected option in javascript: does anyone know how to get the selected value or text, please tell how to write a function for it. I have assigned onchange() function to select so what do i do after that?

我需要在 javascript 中获取所选选项的值：有谁知道如何获取所选值或文本，请告诉如何为其编写函数。我已经分配了 onchange() 函数来选择，那之后我该怎么办？

回答by Hussein

Use either JavaScript or jQuery for this.

为此，请使用 JavaScript 或 jQuery。

Using JavaScript

使用 JavaScript

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

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

Using jQuery

使用 jQuery

$('#select_id').change(function(){
    alert($(this).val());
})

回答by Brandon G

If you're googling this, and don't want the event listener to be an attribute, use:

如果你在谷歌上搜索这个，并且不希望事件侦听器成为一个属性，请使用：

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

回答by el Dude

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>

回答by Danny

No need for an onchange function. You can grab the value in one line:

不需要 onchange 功能。您可以在一行中获取值：

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

Or, split it up for better readability:

或者，将其拆分以获得更好的可读性：

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

select_id.options[select_id.selectedIndex].value;

回答by YakovL

Wow, no really reusable solutions among answers yet.. I mean, a standart event handler should get only an eventargument and doesn't have to use ids at all.. I'd use:

哇，答案中还没有真正可重用的解决方案..我的意思是，一个标准的事件处理程序应该只得到一个event参数，而根本不必使用 id.. 我会使用：

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
}

You may use this handler with each – inline js:

您可以在每个内联 js 中使用此处理程序：

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

jQuery:

jQuery：

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

or vanilla JS handler setting:

或香草 JS 处理程序设置：

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

And don't have to rewrite this for each selectelement you have.

并且不必为select您拥有的每个元素重写它。

Example snippet:

示例片段：

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>

回答by CloudyMarble

Use

用

document.getElementById("select_id").selectedIndex

Or to get the value:

或获取值：

document.getElementById("select_id").value

回答by MiPnamic

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

in the alert you'll see the INT value of the selected index, treat the selection as an array and you'll get the value

在警报中，您将看到所选索引的 INT 值，将选择视为一个数组，您将获得该值

回答by Alexander

HTML:

HTML：

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

JS:

JS：

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

回答by Russell Strauss

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

回答by Vlad Pintea

This is an old question, but I am not sure why people didn't suggest using the event object to retrieve the info instead of searching through the DOM again.

这是一个老问题，但我不确定为什么人们不建议使用事件对象来检索信息，而不是再次搜索 DOM。

Simply go through the event object in your function onChange, see example bellow

只需通过 onChange 函数中的事件对象，请参见下面的示例

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

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

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

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

Might be useful to people looking this up today if this wasn't default behavior 7 years ago

如果这不是 7 年前的默认行为，可能对今天查找此内容的人有用