如何在html select的onChange上传递参数

Question

我是 JavaScript 和 jQuery 的新手。我想显示一个组合框-A，它是一个 HTML ，其选定的 id 和 onChange() 上其他位置的内容。

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

Answer 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 上组合框的选定值事件。

Answer 2

在某些情况下，另一种方法可能很方便，即将所选 的值直接传递给函数，如下所示：

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>

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

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

Answer 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 函数的参数将取决于浏览器。第二种方式似乎跨浏览器工作得很好。

Answer 6

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>

如果您想在选择第一个选项（而不仅仅是“1”）时获取字符串“Mr”，您可以按以下方式执行此操作：

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

另请参阅

• .val() jQuery API 文档

Answer 7

这对我有帮助。

对于选择：

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

对于单选/复选框：

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

Answer 8

你可以尝试下面的代码

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

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

Answer 10

您只能使用“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>

Answer 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);

Answer 12

一旦我编写了这段代码，只是为了解释 select 的 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>

Answer 13

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>

Answer 14

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

这里。

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

Answer 15

简单地：

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

Answer 16

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

Answer 17

我认为现在附加事件处理程序的首选方法（而不是 onchange= 属性）是

document.querySelector('whatever').addEventListener('change', (event) => {
   const theValue = event.target.value;
})