How do I get the custom attribute of a multiple select

Question

Does anyone know how to get the value of a custom attribute "custom" from a select multiple? I think you would get an array by selecting several elements

<select class="selectpicker" multiple>
  <option custom="Mustolest">Mustard</option>
  <option custom="Kellared">Ketchup</option>
  <option custom="Reloaded">Relish</option>
</select>

I'm using bootstrap select. What I have tried is the following:

$(function() {
  $('.selectpicker').selectpicker();

  $('.selectpicker').on("change",function() {
    console.log($('.selectpicker').selectpicker("val"));
  }); 

})

With this I get the values ​​in the form of an array, correct. But I need to get over a custom attribute. The options that you have given me would not be working for me.

Answer 1

Exactly: Get the array of the selected elements and get their respective custom attributes, like this:

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

This will return something like this:

Array [ "Mustolest", "Kellared" ]

Answer 2

Implemet below script, using below script display selected custom options values.

script code:

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

I hope using this script resolved your problem.

Answer 3

You have to use data-custom instead of custom attribute , see doc , If you're using bootstrap select so , to get values just use $('.selectpicker').selectpicker("val") to get values , in order to get custtuom attrib use

let selected = $('.selectpicker').find('option:selected')
    .map(function(index,element){ 
        return $(element).attr("data-custom");
        //or return $(element).data("custom"))
}).toArray();

see below working snippet

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