我是JavaScript和jQuery的新手。我想显示一个combobox-A,这是一个HTML <选择>与其选择的id和内容在onChange()的其他地方。
如何通过其选择id完整的组合框,以及如何通过onChange事件的其他参数?
我是JavaScript和jQuery的新手。我想显示一个combobox-A,这是一个HTML <选择>与其选择的id和内容在onChange()的其他地方。
如何通过其选择id完整的组合框,以及如何通过onChange事件的其他参数?
当前回答
函数setMyValue(v) { console.log (v); } <选择onchange = " setMyValue (this.value)" > <选项值= " " > 1 > < /选项 <选项值= " b " > 2 > < /选项 <选项值= " c " > 3 < /选项> < /选择>
其他回答
在某些情况下,另一种方便的方法是将所选<option />的值直接传递给函数,如下所示:
myFunction(selected) { console.log(选择); } <选择onChange = " myFunction (this.options [this.selectedIndex] value)" > <option value="1">Text 1</option> . <option value="2">Text 2</option> . < /选择>
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>
这段代码一旦我写只是解释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>
这为我onchange = setLocation($(This).val())
在这里。
@Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
我发现@Piyush的回答很有帮助,只是补充一下,如果您以编程方式创建一个选择,那么有一个重要的方法来获得这种行为,可能不明显。假设你有一个函数,你创建了一个新的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函数的参数将依赖于浏览器。第二种方法似乎在跨浏览器中工作得很好。