jQuery 获取选择 onChange 的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11179406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get value of select onChange
提问by RIK
I was under the impression that I could get the value of a select input by doing this $(this).val();and applying the onchangeparameter to the select field.
我的印象是，我可以通过执行此操作$(this).val();并将onchange参数应用于选择字段来获取选择输入的值。
It would appear it only works if I reference the ID.
它似乎只有在我引用 ID 时才有效。
How do I do it using this.
我如何使用它来做到这一点。
回答by thecodeparadox
Try this-
尝试这个-
$('select').on('change', function() {
alert( this.value );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>You can also reference with onchange event-
您还可以参考 onchange 事件-
function getval(sel)
{
alert(sel.value);
}<select onchange="getval(this);">
<option value="1">One</option>
<option value="2">Two</option>
</select>回答by Darin Dimitrov
I was under the impression that I could get the value of a select input by doing this $(this).val();
我的印象是，我可以通过执行 $(this).val(); 来获得选择输入的值。
This works if you subscribe unobtrusively (which is the recommended approach):
如果您不引人注目地订阅（这是推荐的方法），则此方法有效：
$('#id_of_field').change(function() {
// $(this).val() will work here
});
if you use onselectand mix markup with script you need to pass a reference to the current element:
如果您onselect将标记与脚本混合使用，则需要传递对当前元素的引用：
onselect="foo(this);"
and then:
进而：
function foo(element) {
// $(element).val() will give you what you are looking for
}
回答by ilgam
This is helped for me.
这对我有帮助。
For select:
对于选择：
$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});
For radio/checkbox:
对于收音机/复选框：
$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
回答by Krishna
Try the event delegation method, this works in almost all cases.
尝试事件委托方法，这几乎适用于所有情况。
$(document.body).on('change',"#selectID",function (e) {
//doStuff
var optVal= $("#selectID option:selected").val();
});
回答by Abrar Jahin
You can try this (using jQuery)-
你可以试试这个（使用jQuery）-
$('select').on('change', function()
{
alert( this.value );
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>Or you can use simple Javascript like this-
或者你可以像这样使用简单的 Javascript-
function getNewVal(item)
{
alert(item.value);
}<select onchange="getNewVal(this);">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>回答by Ankit Pise
$('#select_id').on('change', function()
{
alert(this.value); //or alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_id">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
回答by Sharuk Ahmed
Arrow function has a different scope than function,
this.valuewill give undefined for an arrow function.
To fix use
箭头函数具有与函数不同的作用域，
this.value将为箭头函数提供 undefined。修复使用
$('select').on('change',(event) => {
alert( event.target.value );
});
回答by drjorgepolanco
This is what worked for me. Tried everything else with no luck:
这对我有用。尝试了其他一切，但没有运气：
<html>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>vanilla</option>
</select>
</body>
</html>
Taken from Mozilla
取自Mozilla
回答by Ali Asad
For all selects, invoke this function.
对于所有选择，调用此函数。
$('select').on('change', function()
{
alert( this.value );
});
For only one select:
仅选择一项：
$('#select_id')
回答by Andre Mesquita
Look for jQuery site
寻找 jQuery站点
HTML:
HTML：
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
JAVASCRIPT:
爪哇脚本：
$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});
jQuery's example:
jQuery 的例子：
To add a validity test to all text input elements:
向所有文本输入元素添加有效性测试：
$( "input[type='text']" ).change(function() {
// Check input( $( this ).val() ) for validity here
});
