Javascript 如何在html选择的onChange上传递参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5024056/
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
How to pass parameters on onChange of html select
提问by Gendaful
I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select>with its selected idand contents at the other place on onChange().
我是 JavaScript 和 jQuery 的新手。我想显示一个组合框-A，它是一个 HTML <select>，id在 onChange() 的另一处有它的选定内容和内容。
How can I pass the complete combobox with its select id, and how can I pass other parameters on fire of the onChange event?
如何通过 select 传递完整的组合框id，以及如何在 onChange 事件触发时传递其他参数？
回答by Piyush Mattoo
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>The above example gets you the selected value of combo box on OnChangeevent.
上面的例子让你在OnChange事件上选择组合框的值。
回答by Cazuma Nii Cavalcanti
Another approach wich can be handy in some situations, is passing the value of the selected <option />directly to the function like this:
在某些情况下可能很方便的另一种方法是将 selected 的值<option />直接传递给函数，如下所示：
function myFunction(chosen) {
console.log(chosen);
}<select onChange="myFunction(this.options[this.selectedIndex].value)">
<option value="1">Text 1</option>
<option value="2">Text 2</option>
</select>回答by aiham
For how to do it in jQuery:
关于如何在 jQuery 中做到这一点：
<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>
<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>
You should also know that Javascript and jQuery are not identical. jQuery is valid JavaScript code, but not all JavaScript is jQuery. You should look up the differences and make sure you are using the appropriate one.
您还应该知道 Javascript 和 jQuery 并不相同。jQuery 是有效的 JavaScript 代码，但并非所有 JavaScript 都是 jQuery。您应该查找差异并确保使用适当的差异。
回答by Michael Plautz
I found @Piyush's answer helpful, and just to add to it, if you programatically create a select, then there is an important way to get this behavior that may not be obvious. Let's say you have a function and you create a new select:
我发现@Piyush 的回答很有帮助，只是补充一下，如果您以编程方式创建一个选择，那么有一种重要的方法可以获得这种可能并不明显的行为。假设您有一个函数并创建了一个新的选择：
var changeitem = function (sel) {
console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';
The normal behavior may be to say
正常的行为可能是说
newSelect.onchange = changeitem;
But this does not really allow you to specify that argument passed in, so instead you may do this:
但这并不能真正允许您指定传入的参数，因此您可以这样做：
newSelect.setAttribute('onchange', 'changeitem(this)');
And you are able to set the parameter. If you do it the first way, then the argument you'll get to your onchangefunction will be browser dependent. The second way seems to work cross-browser just fine.
您可以设置参数。如果您采用第一种方式，那么您将获得的onchange函数参数将取决于浏览器。第二种方式似乎可以跨浏览器正常工作。
回答by Aniket Kulkarni
jQuery solution
jQuery 解决方案
How do I get the text value of a selected option
Select elements typically have two valuesthat you want to access.
First there's the valueto be sent to the server, which is easy:
Select 元素通常有两个要访问的值。
首先是要发送到服务器的值，这很简单：
$( "#myselect" ).val();
// => 1
The second is the text valueof the select.
For example, using the following select box:
第二个是选择的文本值。
例如，使用以下选择框：
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
If you wanted to get the string "Mr" if the first option was selected (instead of just "1") you would do that in the following way:
如果您想在选择第一个选项（而不是仅选择“1”）的情况下获得字符串“Mr”，您可以按以下方式进行：
$( "#myselect option:selected" ).text();
// => "Mr"
See also
也可以看看
回答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 RobertKim
JavaScript Solution
JavaScript 解决方案
<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
document.getElementById("comboA").onchange = function(){
var value = document.getElementById("comboA").value;
};
</script>
or
或者
<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>
or
或者
<script>
document.getElementById("comboA").onchange = handleChange;
function handleChange(evt){
var value = evt.target.value;
};
</script>
回答by feyyaz acet
You can try bellow code
你可以试试下面的代码
<select onchange="myfunction($(this).val())" id="myId">
</select>
回答by Piyush
this code once i write for just explain onChange event of select you can save this code as html and see output it works.and easy to understand for you.
这段代码一旦我写出来只是为了解释选择的 onChange 事件，你可以将此代码保存为 html 并查看输出它的工作原理。并且易于理解。
<html>
<head>
<title>Register</title>
</head>
<body>
<script>
function show(){
var option = document.getElementById("category").value;
if(option == "Student")
{
document.getElementById("enroll1").style.display="block";
}
if(option == "Parents")
{
document.getElementById("enroll1").style.display="none";
}
if(option == "Guardians")
{
document.getElementById("enroll1").style.display="none";
}
}
</script>
<form action="#" method="post">
<table>
<tr>
<td><label>Name </label></td>
<td><input type="text" id="name" size=20 maxlength=20 value=""></td>
</tr>
<tr style="display:block;" id="enroll1">
<td><label>Enrollment No. </label></td>
<td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
</tr>
<tr>
<td><label>Email </label></td>
<td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
</tr>
<tr>
<td><label>Mobile No. </label></td>
<td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
</tr>
<tr>
<td><label>Address</label></td>
<td><textarea rows="2" cols="20"></textarea></td>
</tr>
<tr >
<td><label>Category</label></td>
<td><select id="category" onchange="show()"> <!--onchange show methos is call-->
<option value="Student">Student</option>
<option value="Parents">Parents</option>
<option value="Guardians">Guardians</option>
</select>
</td>
</tr>
</table><br/>
<input type="submit" value="Sign Up">
</form>
</body>
</html>
回答by RawBData
Just in case someone is looking for a React solution without having to download addition dependancies you could write:
以防万一有人正在寻找 React 解决方案而无需下载额外的依赖项，您可以编写：
<select onChange={this.changed(this)}>
<option value="Apple">Apple</option>
<option value="Android">Android</option>
</select>
changed(){
return e => {
console.log(e.target.value)
}
}
Make sure to bind the changed() function in the constructor like:
确保在构造函数中绑定 changed() 函数，例如：
this.changed = this.changed.bind(this);
