如何传递参数 onChange 的 html select

问题描述

我是 JavaScript 和 jQuery 的新手。我想显示一个 combobox-A，它是一个 HTML <select>，其选定的 id 和其他位置在 onChange() 上。

如何通过其选择的 id 传递完整的组合框，以及如何传递 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 事件上组合框的选定值。

次佳解决方案

在 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 。您应该查找差异，并确保使用适当的差异。

第三种解决方案

在某些情况下可以使用另一种方法，将所选 OPTION 的值直接传递给如下功能：

<SELECT onChange="myFunction(this.options[this.selectedIndex].value)">
  <OPTION value="1">Text 1</OPTION>
  <OPTION value="2">Text 2</OPTION>
</SELECT>

希望它有助于某人。

第四种方案

jQuery 解决方案

How do I get the text value of a selected option

选择元素通常有两个要访问的值。首先要发送给服务器的值很简单：

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

第二个是选择的文本值。例如，使用以下选择框：

<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"

也可以看看

.val() jQuery API Documentation

第五种方案

我发现 @ 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 功能的参数将依赖于浏览器。第二种方式似乎工作 cross-browser 很好。

第六种方案

你可以尝试下面的代码

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

参考文献

How to pass parameters on onChange of html select

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何传递参数 onChange 的 html select