如何在html选择onChange上传递参数

我是JavaScript和jQuery的新手。我想显示一个combobox-A，这是一个HTML <选择>与其选择的id和内容在onChange()的其他地方。

如何通过其选择id完整的组合框，以及如何通过onChange事件的其他参数?

当前回答

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

2021-07-26 03:38:39

其他回答

如果有人正在寻找一个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);

2019-10-30 06:35:36

有趣的后盖(selectObject) 值= selectObject.值; 控制台日志(价值); 的 <选择id=“孔博”“> <option value=" >选择组合</option> <选项价值= >“Value1 Text1 < /选项> <选项价值= Value2 " > Text2 < /选项> <选项价值= >“Value3 Text3 < /选项> 选择< - >

上面的示例为您提供OnChange事件上组合框的选定值。

2011-02-17 01:13:32

这为我onchange = setLocation($(This).val())

在这里。

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

2018-10-24 18:42:08

您可以尝试咆哮代码

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

2015-02-25 15:21:22

这段代码一旦我写只是解释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>

2013-03-31 09:44:53

如何在html选择onChange上传递参数

推荐文章

最新文章

标签