如何在html选择onChange上传递参数

我是JavaScript和jQuery的新手。我想显示一个combobox-A，这是一个HTML <select>，其选择的id和内容在onChange()上的另一个地方。

如何通过其选择id完整的组合框，以及如何通过onChange事件的其他参数?

920201 次浏览
小开
最佳答案 

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>

上面的例子为你提供了OnChange事件上组合框的选定值。

小开

如何在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的回答很有帮助，只是补充一下，如果您以编程方式创建一个选择，那么有一个重要的方法来获得这种行为，可能不明显。假设你有一个函数，你创建了一个新的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函数的参数将依赖于浏览器。第二种方法似乎在跨浏览器中工作得很好。

小开

这段代码一旦我写只是解释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>
小开

在某些情况下，另一种方便的方法是将所选<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>

小开

jQuery的解决方案

我如何得到一个选定的选项的文本值

选择你想要访问的具有两个值的元素 首先是要发送给服务器的价值，这很简单:

$( "#myselect" ).val();
// => 1

第二个是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>

如果你想获得字符串“Mr”，如果选择了第一个选项(而不是“1”)，你可以用下面的方式来做:

$( "#myselect option:selected" ).text();
// => "Mr"

另请参阅

小开

您可以尝试咆哮代码

<select onchange="myfunction($(this).val())" id="myId">
</select>
小开

这对我有帮助。

选择:

$('select_tags').on('change', function() {
alert( $(this).find(":selected").val() );
});

广播/复选框:

$('radio_tags').on('change', function() {
alert( $(this).find(":checked").val() );
});
小开

这适用于我onchange = setLocation($(this).val())

这里。

    @Html.DropDownList("Demo",
new SelectList(ViewBag.locs, "Value", "Text"),
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
小开

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>

或

<script>
document.getElementById("comboA").onchange = function(evt){
var value = evt.target.value;
};
</script>

或

<script>
document.getElementById("comboA").onchange = handleChange;


function handleChange(evt){
var value = evt.target.value;
};
</script>
小开

如果有人正在寻找一个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)
}
}

确保在构造函数中绑定changed()函数，如下:

this.changed = this.changed.bind(this);
小开

简单:

function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}

function retrieve_other() {
alert(myForm.SMS_recipient.options[document.getElementById('SMS_recipient').selectedIndex].text);
}


function retrieve() {  alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}
<HTML>
<BODY>
<p>RETRIEVING TEXT IN OPTION OF SELECT </p>
<form name="myForm" action="">
<P>Select:
<select id="SMS_recipient">
<options value='+15121234567'>Andrew</option>
<options value='+15121234568'>Klaus</option>
</select>
</p>
<p>
<!-- Note: Despite the script engine complaining about it the code works!-->
<input type="button" onclick="retrieve()" value="Try it" />
<input type="button" onclick="retrieve_other()" value="Try Form" />
</p>
</form>
</HTML>
</BODY>

< p >输出: Klaus或Andrew取决于selectedIndex是什么。如果你想要的是值，只需将.text替换为value。然而，如果它只是你想要的值(而不是选项中的文本)，那么使用document.getElementById(' sms_receiver ').value

小开

Html模板:

<select class="staff-select">
<option value="">All</option>
<option value="196">Ivan</option>
<option value="195">Jon</option>
</select>

Js代码:

const $staffSelect = document.querySelector('.staff-select')


$staffSelect.onchange = function () {
console.log(this.value)
}
小开 
 //html code
<select onchange="get(this)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>


//javscript code
function get(select) {
let value = select.value;
console.log(value);
}
小开 

function setMyValue(v) {
console.log(v);
}
<select onchange="setMyValue(this.value)">
<option value="a">1</option>
<option value="b">2</option>
<option value="c">3</option>
</select>


提交答案