我是 JavaScript 和 jQuery 的新手。我想显示一个组合框-A，它是一个 HTML <select>，id在 onChange() 上的另一个位置具有其选定内容和内容。
如何通过 select 传递完整的组合框id，以及如何在 onChange 事件触发时传递其他参数？
如何在html选择的onChange上传递参数
IT技术
javascript
jquery
html
combobox
onchange
2021-02-06 01:52:33
6个回答
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事件上选择组合框的值。
在某些情况下可能很方便的另一种方法是将 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>关于如何在 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。您应该查找差异并确保使用适当的差异。
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>
我发现@Piyush 的回答很有帮助，只是补充一下，如果您以编程方式创建一个选择，那么有一种重要的方法可以获得这种可能并不明显的行为。假设您有一个函数并创建了一个新的选择：
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函数参数将取决于浏览器。第二种方式似乎可以跨浏览器正常工作。