如何在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>