How can I get list of selected values from multiple select? I can get value
only( I need to get attr
values ('data-name')
https://playcode.io/301780?tabs=console&index.html&output
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment"> <option value="3" data-name="blago">blago</option> <option value="4" data-name="usd" selected>usd</option> <option value="5" data-name="uah" selected>uah</option> <option value="2" data-name="btc">btc</option> </select> <script> $(document).ready(function() { var vals = $('#id_payment').val() var paymentList = [] if (vals) { for (var i = 0; i < vals.length; i++) { console.log(vals[i]) paymentList.push($(vals[i]).selector) } } }) </script>
You can use map
to loop thru the selected options and use data
to get the data-name
values.
var result = $("#id_payment option:selected").map(function() { return $(this).data("name"); }).get(); console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment"> <option value="3" data-name="blago">blago</option> <option value="4" data-name="usd" selected>usd</option> <option value="5" data-name="uah" selected>uah</option> <option value="2" data-name="btc">btc</option> </select>
Use each
to traverse the items and collect them into an array, like:
var dataNames = [];
$("#id_payment > option[selected]").each(function() {
dataNames.push($(this).data("name"));
});
You can use this code
$("#id_payment option:selected").each(function(index, item){
let name = $(item).data('name');
//alert(name)
nameselected.push(name);
console.log(name);
})
$(document).ready(function () { var vals = $('#id_payment').val() var paymentList = [] var nameselected = [] if (vals) { for (var i = 0; i < vals.length; i++) { console.log(vals[i]) paymentList.push($(vals[i]).selector) } } $("#id_payment option:selected").each(function(index, item){ let name = $(item).data('name'); //alert(name) nameselected.push(name); console.log(name); }) })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment"> <option value="3" data-name="blago">blago</option> <option value="4" data-name="usd" selected>usd</option> <option value="5" data-name="uah" selected>uah</option> <option value="2" data-name="btc">btc</option> </select>
You need to use jquery .each()
function.
Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="payment" style="width: 246px;" required multiple="multiple" class="select2" id="id_payment"> <option value="3" data-name="blago">blago</option> <option value="4" data-name="usd" selected>usd</option> <option value="5" data-name="uah" selected>uah</option> <option value="2" data-name="btc">btc</option> </select> <script> $(document).ready(function() { $('#id_payment :selected').each(function() { console.log($(this).data("name")) }) $("#id_payment").click(function(){ $('#id_payment :selected').each(function() { console.log($(this).data("name")) }) }) }) </script>
It is set up so when you make more selections, it still logs all of the selected items
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.