CODEWITHSUNDEEP
javascripthtml
user11486953
user11486953

Reputation:

How do I get the custom attribute of a multiple select

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.

Upvotes: 2

Views: 1867

Answers (3)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

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/[email protected]/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/[email protected]/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>

Upvotes: -1

sanjay sisodiya
sanjay sisodiya

Reputation: 465

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.

Upvotes: 0

Jb31
Jb31

Reputation: 1391

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

Upvotes: 2

Related Questions