Bootstrap selectpicker“data-subtext”不更新实时更改答案

【问题标题】：Bootstrap selectpicker "data-subtext" does not updating the live changesBootstrap selectpicker“data-subtext”不更新实时更改
【发布时间】：2015-05-29 21:53:48
【问题描述】：

我想在运行时更改我的select 元素的options 的data-subtext 属性。但 data-subtext 不会在 selectpicker 中更新。这是我的代码：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-select

【解决方案1】：

这是因为.selectpicker 类代表select 元素本身，而不是options。考虑到它可以有多个option，您需要说明您希望更改哪个option 的data-subtext。参考以下sn-p：

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

【讨论】：