I'm having hard time in to getting the data attribute set to select option on bootstrap selectpicker .

I tried:

$('.selectpicker').on('changed.bs.select', function (e) {
    var selected = e.target.value;
    console.log("value :  ", selected ); // gives selected value
    console.log("data attribute:  ", $(e.target).data("price")); 
});

data attribute always returns undefined

what wrong I'm doing here ?

I'm having hard time in to getting the data attribute set to select option on bootstrap selectpicker .

I tried:

$('.selectpicker').on('changed.bs.select', function (e) {
    var selected = e.target.value;
    console.log("value :  ", selected ); // gives selected value
    console.log("data attribute:  ", $(e.target).data("price")); 
});

data attribute always returns undefined

what wrong I'm doing here ?

• javascript
• jquery
• twitter-bootstrap
• bootstrap-select
• bootstrap-selectpicker

• Could be several things from e.target not being what you expect, console.log(e.target) to confirm, or the element doesn't have the attribute assigned, spelled or specified as you expect. Please post the actual markup of the relevant DOM in a Minimal, Complete, and Verifiable example using the code snipped feature. – Nope Commented Feb 23, 2018 at 15:37
• 1 exactly wich line return undefined ? Please, make a fiddle that reproduces the error. – lmarqs Commented Feb 23, 2018 at 15:37

4 Answers 4

This works.

$('.selectpicker').on("changed.bs.select", function() {
    var dataTypeAttribute = $('option:selected', this).attr("data-type");
});

Just specify id to select

$("#selectidhere").on("change", function () {
  var dataname = $("option[value=" + $(this).val() + "]", this).attr('data-name');
  alert(dataname);
});

Fiddle Link

$('.selectpicker').on('changed.bs.select', function (e) {
var selected = e.target.value;
console.log("value :  "+selected ); // gives selected value
console.log("data attribute:  "+$(e.target).attr("data-price"));}); 

$(".selectpicker").on("changed.bs.select", 
    function(e, clickedIndex, isSelected, oldValue) {
        var arrayOfSelected = $('.selectpicker').eq(0).val();
        console.log(arrayOfSelected);
 });

It looks weird but it works perfectly so I don't care.