【问题标题】：How to pass parameters on onChange of html select如何在html select的onChange上传递参数
【发布时间】：2011-06-28 18:51:33
【问题描述】：

我是 JavaScript 和 jQuery 的新手。我想展示一个组合框-A，它是一个 HTML <select>，其选定的 id 和内容位于 onChange() 的另一个位置。

如何通过其选择 id 传递完整的组合框，以及如何在 onChange 事件触发时传递其他参数？

【问题讨论】：

你能发一些代码吗？

标签： javascript jquery html combobox onchange

【解决方案1】：

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事件中选择了组合框的值。

【讨论】：

谢谢，这对我有用。基本上我想在不同的地方显示相同的组合框，所以我给了 2 个不同的 id 给 2 个组合框。无论如何，我可以在不同的地方显示相同的组合框。任何帮助将不胜感激。
获取getComboA()内部值的更简洁的方法是var value = sel.value;
只有在选择框失去焦点时才会触发更改事件。有没有办法在值更改后立即触发事件？
使用 this.value 代替它会起作用 =) 发送这个就是发送整个选择元素
就我而言，代码在 Firefox 上运行，但在 Chrome 上不运行。

【解决方案2】：

另一种在某些情况下可以派上用场的方法是将所选<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>

【讨论】：

这正是我所需要的。已经有一个javascript函数可以在单击颜色样本时更改颜色图片。但也有人要求它在 PayPal 下拉选择选项上工作。使用了这个，但没有使用“值”（因为我需要它用于 Paypal），我为每个选项添加了一个“标签”，其中包含我用来更改图片的变量名称。工作完美！谢谢！！
这很好。另一个更简单的有效选项是：
用于访问所选选项的其他属性。

【解决方案3】：

关于如何在 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。您应该查找差异并确保您使用的是合适的。

【讨论】：

我试过了，但即使我放入 document.ready 方法，也不会调用更改函数。我的代码是 htmlData.push('
@Gendaful：htmlData.push($('<select id="choose" name="choose">')); 应该可以解决问题（您之前推送的是字符串而不是成熟的节点）。 >6 年过去了……

【解决方案4】：

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>

【讨论】：

这是这里最通用和最全面的解决方案。谢谢！
这个解决方案对我有用。我能够在没有库的情况下轻松实现。纯香草。很好！

【解决方案5】：

我发现@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 函数的参数将取决于浏览器。第二种方法似乎可以跨浏览器正常工作。

【讨论】：

你邪恶的eval-like string-to-code 转换是没有必要的。实际上，如果您将 changeitem 重写为 var changeitem = function () {console.log(this.selectedIndex); };（即使用 this 而不是函数参数），newSelect.onchange = changeitem; 可以正常工作。或者，保持changeitem 不变，写成newSelect.onchange = function () {changeitem(this); };。
newSelect.setAttribute('onchange', 'changeitem(this)'); - 为此欢呼

【解决方案6】：

jQuery 解决方案

How do I get the text value of a selected option

选择元素通常具有您想要访问的两个值。
首先是要发送到服务器的 value，这很简单：

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

如果您想在选择第一个选项（而不仅仅是“1”）的情况下获取字符串“Mr”，您可以通过以下方式进行：

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

另见

.val() jQuery API Documentation

【讨论】：

【解决方案7】：

这对我有帮助。

供选择：

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

对于单选/复选框：

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

【讨论】：

【解决方案8】：

你可以试试下面的代码

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

【讨论】：

【解决方案9】：

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)
}

【讨论】：

【解决方案10】：

此代码一旦我编写只是解释选择的 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>

【讨论】：

【解决方案11】：

以防万一有人在寻找 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);

【讨论】：

【解决方案12】：

这对我有用 onchange = setLocation($(this).val())

这里。

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

【讨论】：

【解决方案13】：

简单地说：

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>

输出： Klaus 或 Andrew 取决于 selectedIndex 是什么。如果您追求价值，只需将 .text 替换为价值。但是，如果它只是您所追求的值（不是选项中的文本），那么使用 document.getElementById('SMS_recipient').value

【讨论】：