logo标签列表

如何在HTML select的onChange事件中传递参数

javascriptjqueryhtmlcomboboxonchange
265

我是JavaScript和jQuery的初学者。我想在onChange()事件中展示一个下拉框A，这个下拉框是一个HTML <select>元素，需要同时传递它的选中id和内容到另一个地方。

我该如何传递整个下拉框及其选择的id，以及如何在触发onChange事件时传递其他参数？

6
请问您能否提供一些代码？ - KJYe.Name
17个回答
498

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 事件中获取下拉框的选定值。

谢谢，这对我很有用。基本上我想在不同的地方显示相同的组合框，所以我给了两个不同的ID给两个组合框。有没有办法可以在不同的地方显示相同的组合框。任何帮助将不胜感激。 - Gendaful
14
获取 getComboA() 中的值更加简洁的方法是 var value = sel.value;。 - Yony
4
选择框只有在失去焦点时才会触发更改事件。有没有一种方法可以在值更改后立即触发该事件？ - doABarrelRoll721
3
使用 this.value 替代，它会起作用 =) 发送 this 是发送整个选择元素。 - Colin Rickels
对于我的情况，代码在Firefox上可以运行但在Chrome上不行。 - avijit
74

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

1
这正是我所需要的。我已经有一个JavaScript函数，可以在单击颜色样本时更改颜色图片。但是有一个要求，希望它也能在PayPal下拉选择选项上工作。我使用了这个方法，但是我没有使用'value'（因为我需要它用于Paypal），而是为每个选项添加了一个'label'，其中包含我用于更改图片的变量名称。完美地解决了问题！谢谢！！ - FlashNoob468
7
这很好。另一个更简单而有效的选择是： <select onChange="myFunction(this.value)"> - Daniel Silva
1
有助于访问所选选项的其他属性。 - Cees Timmerman
35

使用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。你应该查阅它们之间的区别，并确保你正在使用合适的那一个。

2
我尝试了这个，但即使我将其放在document.ready方法中，change函数也没有被调用。我的代码是：htmlData.push('<select id="choose" name="choose">'); $('#choose').change(function() { alert('change called'); alert('The option with value '+$(this).value()+' and text '+$(this).text()+' was selected.'); }); 请帮我解决这个问题。 - Gendaful
@Gendaful: htmlData.push($('<select id="choose" name="choose">')); 这样就可以了（之前你推送的是字符串而不是完整的节点）。>已经过去6年了... - Johannes
24

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>
1
这是最通用和全面的解决方案。谢谢！ - divs1210
这个解决方案对我很有效。我能够轻松地实现它，而且没有使用任何库。纯净的原生代码。非常好！ - Grogu
6

我发现@Piyush的回答很有帮助，补充一下，如果你以编程方式创建了一个select，那么获取此行为的重要方法可能不是很明显。假设您有一个函数并创建了一个新的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 函数的参数将取决于浏览器。第二种方法似乎在各种浏览器中都能正常工作。

1
你不需要像 eval 一样将字符串转换为代码。实际上，如果你将 changeitem 重写为 var changeitem = function () {console.log(this.selectedIndex); };（即使用 this 而不是函数参数），那么 newSelect.onchange = changeitem; 就可以正常工作了。或者，保留 changeitem 不变，并编写 newSelect.onchange = function () {changeitem(this); };。 - Steve Byrnes
1
newSelect.setAttribute('onchange', 'changeitem(this)'); - 谢谢 - Eggcellentos
5

This is helped for me.

For select:

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

对于单选框/复选框：

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

jQuery解决方案

如何获取所选选项的文本值

选择元素通常有两个值需要访问。
首先是要发送到服务器的值，这很容易：

$( "#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"

参见

3
您可以尝试以下代码。
<select onchange="myfunction($(this).val())" id="myId">
    </select>
3

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)
}
3
你可以只用 'this.value' 发送值。
function getComboA(selectObjectValue) {
   console.log(selectObjectValue);
}

<select id="comboA" onchange="getComboA(this.value)">
   <option value="">Select combo</option>
   <option value="Value1">Text1</option>
   <option value="Value2">Text2</option>
   <option value="Value3">Text3</option>
</select>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接