Bootstrap selectpicker "data-subtext" 不更新实时更改
Bootstrap selectpicker "data-subtext" does not updating the live changes
我想在运行时更改 select
元素的 option
的 data-subtext
属性。但是 data-subtext
不会在 selectpicker 中更新。
这是我的代码:
$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');
那是因为 .selectpicker
class 代表 select
元素本身而不是 option
元素。考虑到它可以有多个 option
,您需要说明您希望更改哪个 option
的 data-subtext
。参考以下片段:
$(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>
我想在运行时更改 select
元素的 option
的 data-subtext
属性。但是 data-subtext
不会在 selectpicker 中更新。
这是我的代码:
$('.selectpicker').attr("data-subtext","new subtext").selectpicker('refresh');
那是因为 .selectpicker
class 代表 select
元素本身而不是 option
元素。考虑到它可以有多个 option
,您需要说明您希望更改哪个 option
的 data-subtext
。参考以下片段:
$(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>