如何使用 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>