[英]How do I get the custom attribute of a multiple select
有誰知道如何從多個選擇中獲取自定義屬性“ custom”的值? 我認為您可以通過選擇幾個元素來獲得一個數組
<select class="selectpicker" multiple>
<option custom="Mustolest">Mustard</option>
<option custom="Kellared">Ketchup</option>
<option custom="Reloaded">Relish</option>
</select>
我正在使用引導選擇。 我嘗試了以下內容:
$(function() {
$('.selectpicker').selectpicker();
$('.selectpicker').on("change",function() {
console.log($('.selectpicker').selectpicker("val"));
});
})
這樣我就可以得到數組形式的值,正確的。 但是我需要克服一個自定義屬性。 您給我的選擇將對我不起作用。
確切地說:獲取所選元素的數組並獲取它們各自的自定義屬性,如下所示:
$("select :selected").map((i, el) => $(el).attr("custom")).toArray()
這將返回如下內容:
Array [ "Mustolest", "Kellared" ]
Implemet下面的腳本,使用下面的腳本顯示選定的自定義選項值。
腳本代碼:
$(".selectpicker").on("change", function(){ var optionValues= []; $.each($(".selectpicker option:selected"), function(){ optionValues.push($(this).val()); }); $("#DisplaySeletedOptions").html(optionValues+','); });
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="selectpicker" multiple> <option custom="Mustolest">Mustard</option> <option custom="Kellared">Ketchup</option> <option custom="Reloaded">Relish</option> </select> <div id="DisplaySeletedOptions"></div>
我希望使用此腳本可以解決您的問題。
您必須使用data-custom
而不是custom
屬性,請參閱doc ,如果您使用的是bootstrap select so, $('.selectpicker').selectpicker("val")
獲取值,只需使用$('.selectpicker').selectpicker("val")
來獲取值,即可取得使用權
let selected = $('.selectpicker').find('option:selected')
.map(function(index,element){
return $(element).attr("data-custom");
//or return $(element).data("custom"))
}).toArray();
參見下面的工作片段
$(function() { $('.selectpicker').selectpicker(); $('.selectpicker').on("change",function() { //console.log($('.selectpicker').selectpicker("val")); let selected = $('.selectpicker').find('option:selected') .map(function(index,element){ return $(element).attr("data-custom"); //or return $(element).data("custom")) }).toArray(); console.clear(); console.log(selected); }); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple> <option data-custom="Mustolest">Mustard</option> <option data-custom="Kellared">Ketchup</option> <option data-custom="Reloaded">Relish</option> </select>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.