如何在html select的onChange上传递参数
我是JavaScript和jQuery的新手。 我想要显示一个comboboxA，它是一个HTML <select> ，它的onChange（）上的选定id和内容位于另一个位置。
我怎样才能传递完整的combobox与其selectid ，以及如何传递onChange事件的火灾其他参数？
function getComboA(selectObject) { var value = selectObject.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>
上面的例子获取OnChange事件combobox的选定值。
在某些情况下，另一种方法可能很方便，就是将所选OPTION的值直接传递给函数，如下所示：
<SELECT onChange="myFunction(this.options[this.selectedIndex].value)"> <OPTION value="1">Text 1</OPTION> <OPTION value="2">Text 2</OPTION> </SELECT>
希望它可以帮助别人。
如何在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>
你也应该知道Javascript和jQuery是不一样的。 jQuery是有效的JavaScript代码，但不是所有的JavaScript都是jQuery。 你应该查看差异，并确保你使用的是适当的。
我发现@ Piyush的答案是有帮助的，只是为了增加它，如果你编程创build一个select，那么有一个重要的方法来获得这种行为，可能不明显。 假设你有一个function，你创build一个新的select：
var changeitem = function (sel) { console.log(sel.selectedIndex); } var newSelect = document.createElement('select'); newSelect.id = 'newselect';
正常的行为可能是说
newSelect.onchange = changeitem;
但是这并不能让你指定传入的参数，所以你可以这样做：
newSelect.setAttribute('onchange', 'changeitem(this)');
你可以设置参数。 如果你这样做的第一种方式，那么你会得到你的onchange函数的参数将取决于浏览器。 第二种方式似乎可以跨浏览器工作。
jQuery解决scheme
如何获取选定选项的文本值
select元素通常有两个要访问的值 。
首先是要发送到服务器的价值 ，这很简单：
$( "#myselect" ).val(); // => 1
第二个是select的文本值 。
例如，使用以下select框：
<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>
如果你想得到string“先生”，如果第一个选项被选中（而不是“1”），你会这样做，以下列方式：
$( "#myselect option:selected" ).text(); // => "Mr"
也可以看看
- .val（）jQuery API文档
你可以试试下面的代码
<select onchange="myfunction($(this).val())" id="myId"> </select>
这个代码一旦我写了只是解释onChange事件的select，你可以保存这个代码为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>
这对我有帮助。
对于select：
$('select_tags').on('change', function() { alert( $(this).find(":selected").val() ); });
对于收音机/checkbox：
$('radio_tags').on('change', function() { alert( $(this).find(":checked").val() ); });
从列表中select一辆新车。 当您select一辆新车时，会触发一个输出所选车辆的值的function。
<!DOCTYPE html> <html> <body> <select id="mySelect" onchange="myFunction(this)"> <option value="Audi">Audi <option value="BMW">BMW <option value="Mercedes">Mercedes <option value="Volvo">Volvo </select> <p id="demo"></p> <script> function myFunction(selectObject) { var x = selectObject.value; document.getElementById("demo").innerHTML = "You selected: " + x; } </script> </body> </html>
