從多個下拉列表中獲取選定的值
[英]get selected values from multiple dropdown lists
問題描述
在我正在制作的應用程序中，我有幾個下拉列表（超過 10 個）。 我在單擊按鈕時無法獲取每個下拉列表的結果。 我需要一種迭代方式來獲取用戶從每個下拉列表中選擇的選項。
我可以使用以下方法從一個下拉列表中獲取值：
let drops = [];
$(document).delegate("select", "change", function() {
var values = $('#drop1').val(); // type of array
drops = values;
});
console.log(drops);
但我需要一種迭代方式來從所有下拉列表中獲取選定的值。 這是我的嘗試：
$('#btner').click(function() {
var values;
$('#container > .d-flex > select').each(function() {
let id = $(this).attr('id'); //gets id of each dropdown
$(document).delegate("select", "change", function() {
values = $('#' + id).val(); // type of array
});
console.log(values);
});
})
這是我的代碼的一般結構。
new TomSelect('#drop1', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], }); new TomSelect('#drop2', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], }); new TomSelect('#drop3', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], });
<!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/css/tom-select.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/js/tom-select.complete.min.js"></script> </head> <body> <div id="container"> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop1" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item1">Item1</option> <option value="Item2">Item2</option> <option value="Item3">Item3</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop2" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item4">Item4</option> <option value="Item5">Item5</option> <option value="Item6">Item6</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop3" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item7">Item7</option> <option value="Item8">Item8</option> <option value="Item9">Item9</option> </select> </div> </div> <!-- Button --> <br> <br> <button id="btner" type="button" class="btn"> Sumbit </button> </body> </html>
2 個解決方案
解決方案1
1 已采納 2021-07-03 17:57:56
您可以使用map() 。
我不確定您希望它們采用什么格式，因此以下返回一個多維數組。
返回一個包含每個對象的 id 和值的對象將是一個簡單的修改
$('#btner').on('click', function(e) { const selVals = $('.d-flex select').map((i, el) => [$(el).val()]).get(); console.log(JSON.stringify(selVals)) }); const opts = { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], } new TomSelect('#drop1', opts); new TomSelect('#drop2', opts); new TomSelect('#drop3', opts);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/css/tom-select.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/js/tom-select.complete.min.js"></script> <div id="container"> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop1" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item1">Item1</option> <option value="Item2" selected>Item2</option> <option value="Item3">Item3</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop2" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item4">Item4</option> <option value="Item5" selected>Item5</option> <option value="Item6" selected>Item6</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop3" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item7">Item7</option> <option value="Item8" selected>Item8</option> <option value="Item9">Item9</option> </select> </div> </div> <!-- Button --> <br> <br> <button id="btner" type="button" class="btn"> Sumbit </button>
解決方案2
0 2021-07-03 17:50:28
下面是獲取所有下拉選擇值的示例
$('#btner').click(function() { var values = []; values.push($("#drop1 :selected").map((_, e) => e.value).get()); values.push($("#drop2 :selected").map((_, e) => e.value).get()); values.push($("#drop3 :selected").map((_, e) => e.value).get()); console.log(values) }) new TomSelect('#drop1', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], }); new TomSelect('#drop2', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], }); new TomSelect('#drop3', { sortField: 'text', hideSelected: false, duplicates: true, plugins: ['input_autogrow'], });
<!DOCTYPE html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/css/tom-select.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/tom-select@1.7.5/dist/js/tom-select.complete.min.js"></script> </head> <body> <div id="container"> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop1" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item1">Item1</option> <option value="Item2">Item2</option> <option value="Item3">Item3</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop2" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item4">Item4</option> <option value="Item5">Item5</option> <option value="Item6">Item6</option> </select> </div> <br><br> <div class="d-flex" id="menuItems" style="width: 58%;"> <select id="drop3" style="width: 100%;" multiple data-mdb-option-height="44"> <option value="" disabled selected>Select</option> <option value="Item7">Item7</option> <option value="Item8">Item8</option> <option value="Item9">Item9</option> </select> </div> </div> <!-- Button --> <br> <br> <button id="btner" type="button" class="btn"> Sumbit </button> </body> </html>
如何使用JavaScript從多個下拉列表中選擇唯一值？
[英]How to select unique values from multiple dropdown lists using JavaScript?
根據其他列表選定值更新下拉列表中的選定值
[英]Update selected value in dropdown list depending on other lists selected values
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.