Question

有人知道如何从选择的多个中获取自定义属性“ 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"));
  }); 

})

这样我就得到了数组形式的值，正确的。但是我需要克服一个自定义属性。您给我的选择将对我不起作用。

Answer 1

脚本下方出现错误，使用以下脚本显示选定的自定义选项值。

脚本代码：

$(".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>

我希望使用此脚本可以解决您的问题。

Answer 2

完全是：获取所选元素的数组并获取它们各自的自定义属性，如下所示：

$("select :selected").map((i, el) => $(el).attr("custom")).toArray()

这将返回如下内容：

Array [ "Mustolest", "Kellared" ]

Answer 3

您必须使用data-custom而不是custom属性，请参阅doc ，如果您使用的是引导程序，请选择so，以获取值只需使用$('.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>

如何获得多项选择的自定义属性

3 个答案: