Get selected value/text from Select on change

小开

为此使用 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());
})

小开

使用

document.getElementById("select_id").selectedIndex

或者得到价值:

document.getElementById("select_id").value

小开

<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 值，将所选内容视为一个数组，您将获得该值

小开

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>

小开

不需要 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;

小开

如果您正在 google 这个，并且不希望事件侦听器成为一个属性，那么使用:

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>

小开

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;

小开

哇，答案中还没有真正可重用的解决方案。.我的意思是，标准的事件处理程序应该只有一个 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
}

您可以对 each-inline js 使用这个处理程序:

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

JQuery:

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

或者普通的 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>

小开

我想知道，每个人都张贴了关于 value和 text选项，以获得从 <option>和没有人建议 label。

所以我建议使用所有浏览器都支持的 label

获得 value(与其他建议相同)

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

获取 option text(即通信或-选择 -)

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

OR (新建议)

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

超文本标示语言

<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将返回 新短信而不是沟通

还有

注意: 在 Firefox 中不可能设置 label 属性(只能返回)。

小开

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>

小开

我试着用我自己的样品来解释，但是我希望它能帮助你。您不需要 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>

小开

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

只需遍历您的 onChange 函数中的事件对象，就可以看到下面的示例

功能测试() Log (event.srcElement.value) ; }

Http://jsfiddle.net/corsico/3yvh9wc6/5/

如果这不是7年前的默认行为，对于今天的人们来说可能会有用

小开

HTML:

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

约翰逊:

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

小开

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

小开

        $('#select_id').change(function(){
// selected value
alert($(this).val());
// selected text
alert($(this).find("option:selected").text());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select onchange="test()" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>

小开

为什么过于复杂:

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
console.log(select.value);


// or if it changes dynamically
console.log(e.target.value);
});

 let select = document.getElementById('select_id');
select.addEventListener('change', function() {
console.log(select.value);
// just for test
alert(select.value);
});

<select id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>

小开

只需使用简单易用的 JavaScript 就可以得到它。

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


function test()
{
let order_details_id=document.getElementById('select_id').value;
alert(select_id);
}

小开

您可以通过向名为 test(this.value)的函数传递“ this.value”作为参数来从 select 元素获取值您应该在 script 元素中创建一个带有参数的函数，最后您可以在该函数中编写 console.log(number)来获取所选的值。

function test(number) {
console.log(number)
}

<!DOCTYPE html>
<html>


<body>


<p>Select a new car from the list.</p>
<select onchange="test(this.value)" id="select_id">
<option value="0">-Select-</option>
<option value="1">Communication</option>
</select>


</body>


</html>

小开

在 html 中

(change)="onChangeCategory($event)"

在 javascript/typescript 中

onChangeCategory(event: any) {
console.log(event.target.options[event.target.selectedIndex].value);
console.log(event.target.options[event.target.selectedIndex].text);
}

小开

您将 onchange 处理程序设置为某个函数或字符串

document.getElementById('cphForm_ddlFacility').value;

或者，对于较老的浏览器

document.getElementById('cphForm_ddlFacility')[document.getElementById('cphForm_ddlFacility').selectedIndex].value

小开

一旦调用了 onChange，您就可以添加 JS 或 JQuery 代码段来使您的思想工作。

//Javascript


document.getElementById("select_id").selectedIndex // prints text value of the option
document.getElementById("select_id").value // prints the value of the option


//JQUERY


var selected = $('#select_id option:selected').val();
// prints the **value** of the option clicked in the dropdown
    

var selected = $('#select_id option:selected').html();
// prints the **text** of the option clicked in the dropdown