如何使用 Jquery 将 2 个选择框中的所有选定值存储到数组中？

Question

我有 2 个这样的选择框：

<div class="info">
    <select name="type" class="data" onchange="getData(this.value);">
        <option value="teacher">Teacher</option>
        <option value="student">Student</option>
    </select>
    <select name="class" class="data" onchange="getData(this.value);">
        <option value="1A">Class 1A</option>
        <option value="1B">Class 1B</option>
    </select>
</div>
<script>
    function getData() {
        var datas = [];
        $.each($('.data'), function (index, value) {
            if ($(value).prop('selected') == true) {
                datas.push($(value).val());
            }
        });
        console.log(datas);
    }
</script>

我想在调用 onchange 事件时将所有选定的值存储在一个数组中。 但是我的代码不起作用，有什么帮助吗？

Answer 1

要使用 jQuery 实现这一点，您可以删除过时的onchange属性并使用不显眼的 JS 代码来挂钩您的事件。

从那里您可以使用map()从所有.data元素的选定值构建一个数组。 尝试这个：

 $('.data').change(function() { var selectedValues = $('.data').map(function() { return $(this).val(); }).get(); console.log(selectedValues); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info"> <select name="type" class="data"> <option value="teacher">Teacher</option> <option value="student">Student</option> </select> <select name="class" class="data"> <option value="1A">Class 1A</option> <option value="1B">Class 1B</option> </select> </div>

Answer 2

您需要在.data上使用each来从下拉列表中获取所有选定的值。 检查下面的代码。

 $(".data").on("change", function () { var datas = []; $(".data").each(function () { datas.push($(this).val()); }) console.log(datas); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="info"> <select name="type" class="data" > <option value="teacher">Teacher</option> <option value="student">Student</option> </select> <select name="class" class="data"> <option value="1A">Class 1A</option> <option value="1B">Class 1B</option> </select> </div>