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.

And what you already tried? Please show us your attempt and then we can try to debug and help to reach the objective — Calvin Nunes, Jul 17 '19 at 17:31

score 2 · Accepted Answer · answered Jul 17 '19 at 17:34

2

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" ]

answered Jul 17 '19 at 17:34

Jb31

1,381
1
10
19

score 0 · Answer 2 · answered Jul 17 '19 at 17:56

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.

Bourbia Brahim · Answer 3 · 2019-07-18T09:15:05.120

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>

Yes, I'm using bootstrap select, but in that way I get the values, what I need to get are the values of a custom attribute — , Jul 17 '19 at 17:43
@DamianRicobelli Sorry , I just noticed that you search for attribute not text , I've edited my answer ,:) — Bourbia Brahim, Jul 17 '19 at 17:59

How do I get the custom attribute of a multiple select

3 Answers3