I want to change my data-subtext attribute of the options of my select element in runtime. But data-subtext does not get updated in selectpicker. Here's my code:

$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');

I want to change my data-subtext attribute of the options of my select element in runtime. But data-subtext does not get updated in selectpicker. Here's my code:

$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');

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

Share Improve this question Follow edited May 29, 2015 at 13:53 jarlh 44.8k88 gold badges5050 silver badges6767 bronze badges asked May 29, 2015 at 5:34 prakashstar42prakashstar42 68711 gold badge66 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

That's because .selectpicker class stands for the select element itself not for it's options. Considering it can have more than one option you need to state which option's data-subtext you wish to change. refer to the following snippet:

$(document).ready(function() {
  $('#myBtn').click(function() {
    $(".selectpicker > option:eq(1)").data("subtext", "Look I'm changed");
    $(".selectpicker").selectpicker('refresh');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="http://code.jquery./jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare./ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>

 <select class="selectpicker">
        <option data-subtext="Mustard subtext">Mustard</option>
        <option data-subtext="Ketchup subtext">Ketchup</option>
        <option data-subtext="Relish subtext">Relish</option>
      </select>
      <a class="btn btn-default" id="myBtn">Update second options data-subtext</a>