bootstrap 4 selectpicker如何動態添加“子文本”

Question

使用Bootstrap-4，我試圖在selectpicker的所有選項文本旁邊動態添加“ data-subtext”。 在數組外創建選項列表可以使用以下代碼。 但是我也找不到如何添加數據子文本的方法。 以下是相關代碼：

    <!---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> 

Answer 1

您更新代碼以添加如下屬性：

  <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> 

您可以從以下文檔中找到有關setAttribute如何工作的更多信息： https : //developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute