Working with Bootstrap-4 I'm trying to dynamically add 'data-subtext' next to all the option texts of a selectpicker. Using the below code is ok with creating the list of options out of the array. But I failed to find how to add the data-subtext text as well. Here is the relevant code:
<!---HTML part,use function to insert list of options ------>
<div class="form-group mr-2">
<div class="col-mr-2">
<div class="input-group">
<div class="input-group-append">
<select class="selectpicker w-100" data-show-subtext="true" data-live-search="true" id="buttNameSel" name="buttNameF" onChange="replacButtName()">
<option data-subtext="mysubtext_list" >select-from:</option>
<!------ autofill the options---------->
</select>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
// set option list of names
selButtname = document.getElementById( 'buttNameSel' );
var opt;
for (i=0; i < nItems;i++) {
buttName = ButtNamesSplitList[i];
opt = document.createElement("option");
opt.text=buttName ;
selButtname.add(opt);
}
$('.selectpicker').selectpicker('refresh');
</script>
You an update your code to add the attribute like this:
<script type="text/javascript" >
// set option list of names
selButtname = document.getElementById( 'buttNameSel' );
var opt;
for (i=0; i < nItems;i++) {
buttName = ButtNamesSplitList[i];
opt = document.createElement("option");
opt.text=buttName ;
opt.setAttribute("data-subtext", "your_sub_text"); //add subtext here
selButtname.add(opt);
}
$('.selectpicker').selectpicker('refresh');
</script>
You can find more information how setAttribute works from this documentation: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
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.