Question

重构select元素的编写方式，并尝试弄清楚如何在表单提交中访问select下拉列表的值。

目前，代码如下所示：

  <select onchange="myFunc(this.value)">Some Options</select>

想做这样的事情：

<form onsubmit="myFunc("Send the value of the select element")">
    <select>Some Options</select>
    <input type="submit"/>
</form>

如果“this”有新的上下文，那么获取select元素值的最佳方法是什么？

Answer 1

您更喜欢使用纯JS的解决方案，还是可以使用JQuery？

<html>
<head>
    <script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#myselect').change(function() {
                console.log($(this).val());             
            });
        });
    </script>
    <form id="myform">
        <select id="myselect">
            <option value="val1">opt1</option>
            <option value="val2">opt2</option>
        </select>
        <input type="submit"/>
    </form>
</body>
</html>

以下是使用纯Javascript的替代方法：

<html>
<head>
    <script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body onload="domisready()">
    <script type="text/javascript">
        var domisready = function() {
            document.getElementById('myselect').onchange = function() {
                console.log(this.options[this.selectedIndex].value);
            };
        };
    </script>
    <form id="myform">
        <select id="myselect">
            <option value="val1">opt1</option>
            <option value="val2">opt2</option>
        </select>
        <input type="submit"/>
    </form>
</body>
</html>

Answer 2

假设您在表单中只有一个选择，这指的是表单上下文。请尝试：

 $(this).find('select').val();

访问表单提交上的选择元素值

2 个答案: