JavaScript解决方案

Question

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

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

Answer 1

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

Answer 2

在某些情况下可以使用的另一种方法是将所选<option />的值直接传递给函数，如下所示：

<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

我发现@ 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 5

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

Answer 6

这对我有帮助。

选择：

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

收音机/复选框：

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

Answer 7

您可以尝试以下代码

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

Answer 8

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 9

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

Answer 11

这对我有用onchange =“ setLocation（$（this）.val（））”

这里..

@ Html.DropDownList（“ Demo”，新的SelectList（ViewBag.locs，“ Value”，“ Text”），新的{Class =“ ddlStyle”，onchange =“ setLocation（$（this）.val（）） “}）;

Answer 12

简单地说：

function retrieve(){
alert(document.getElementById('SMS_recipient').options[document.getElementById('SMS_recipient').selectedIndex].text);
}

< script type = "text/javascript> {

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

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

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 14

从列表中选择一辆新车。选择新车时，会触发一个功能，输出所选车辆的值。

<!DOCTYPE html>
<html>
	
  <body>

    <select id="mySelect" onchange="myFunction(this)">
      <option value="Audi">Audi
      <option value="BMW">BMW
      <option value="Mercedes">Mercedes
      <option value="Volvo">Volvo
    </select>

    <p id="demo"></p>

    <script>
      function myFunction(selectObject) {
        var x = selectObject.value;
        document.getElementById("demo").innerHTML = "You selected: " + x;
      }
    </script>

  </body>
	
</html>

W3school onChange

JavaScript数组，每个循环和onChange选择

<!DOCTYPE html>
<html>
	
  <body>
			
    <p id="select"></p>			

    <script>
					
      var txt = "";
      var person = {id1:"John", id2:"Doe", id3:"John Doe"}; 
      var x;
					
      text   = "<select id='mySelect' onchange='myFunction()'>";					
					
      for (x in person) {

        text += "<option value='" + x + "'>" + person[x] + "</option>";				
							
      }
					
      text += "</select>";
					
      document.getElementById("select").innerHTML = text;
					
    </script>
			
    <p id="text"></p>			

    <script>
      function myFunction() {
        var x = document.getElementById("mySelect").value;							
        document.getElementById("text").innerHTML = "You selected: " + x + " as value";
      }
    </script>			

  </body>
	
</html>

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

14 个答案:

jQuery解决方案

另见

JavaScript解决方案