从更改时选择中获取选定的值/文本

<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（）函数来选择那么我之后做了什么？

12 个解决方案

#1

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());
})

#2

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;

#3

<script>
function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    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>

#4

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

如果您正在使用Google搜索，并且不希望事件侦听器成为属性，请使用：

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

#5

Use

使用

document.getElementById("select_id").selectedIndex

Or to get the value:

或者获得价值：

document.getElementById("select_id").value

#6

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

哇，答案中还没有真正可重用的解决方案..我的意思是，一个标准的事件处理程序应该只获取一个事件参数，而不必使用任何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:

或vanilla JS处理程序设置：

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;

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

并且不必为每个选择元素重写此内容。

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>

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

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值，将选择视为数组，您将获得该值

#8

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>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

#9

I wonder that everyone has posted about value and text option to get from <option> and no one suggested label.

我想知道每个人都发布了有关从

So I am suggesting label too, as supported by all browsers

所以我也建议标签，所有浏览器都支持

To get value (same as others suggested)

获得价值（与其他建议相同）

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

To get option text (i.e. Communication or -Select-)

获取选项文本（即通信或 - 选择 - ）

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

OR (New suggestion)

或（新建议）

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

HTML

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>

Note: In above HTML for option value 2, label will return newText instead of Communication

注意：在选项值2的上述HTML中，label将返回newText而不是Communication

Also

也

Note: It is not possible to set the label property in Firefox (only return).

注意：无法在Firefox中设置label属性（仅返回）。

#10

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>

#11

I have tried to explain with my own sample, but I hope it will help you. You don't need onchange="test()" Please run code snippet for getting a live result.

我试着用我自己的样本解释，但我希望它能帮到你。你不需要onchange =“test（）”请运行代码片段来获取实时结果。

document.getElementById("cars").addEventListener("click", 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>

#12

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/

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

如果这不是7年前的默认行为，那么今天看起来很有用的人可能会有用

#1