I want to change my data-subtext
attribute of the option
s 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');
That's because .selectpicker
class stands for the select
element itself not for it's option
s. 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.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.