如何为 select-picker 的特定选项动态隐藏数据子文本？

Question

Select-选择器

<select class="selectpicker form-control " name="name_id" >
            <option disabled selected value> -- select a category -- </option>
            <option id="classes" value="class" >class </option>
            <option id="schedule" value="schedule" >schedule</option>
        </select>

Javascript

document.querySelector('#classes').setAttribute("data-subtext", "Class 2");
$(".selectpicker").selectpicker('render').selectpicker("refresh");

隐藏潜台词

$('.selectpicker').selectpicker({
        showSubtext: false
 });

我尝试通过隐藏它来取消设置数据子文本，但没有任何反应。

这是我的参考： Trying to set data-live-search to select-picker

更新：

谢谢@HMZ 的解答！

Answer 1

作为概念验证，我使用按钮来触发更改 option 元素的 data-subtext 但这可以通过某些事件或不同的机制轻松触发。

var subTexts = {
  classes: "class class",
  schedule: "schedule"
};

$(function() {

  $('.selectpicker').selectpicker();

  $(".trigger").click(function() {
    SetSubText($(this).attr("data-option"), subTexts[$(this).attr("data-option")]);
  })
});

function SetSubText(option, subText) {

  //$(`#${option}`).attr("data-subtext", subText);
  document.querySelector(`#${option}`).setAttribute("data-subtext", subText)
  //$(`option:not("#${option}")`).attr("data-subtext", "");
  document.querySelectorAll(`option:not(#${option})`).forEach((function(x) {
    x.setAttribute("data-subtext", "");
  }));

  $(".selectpicker").selectpicker('render').selectpicker("refresh");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<select class="selectpicker form-control " name="name_id">
  <option disabled selected> -- Select a category -- </option>
  <option id="classes" value="class" data-subtext="Class Class">Class</option>
  <option id="schedule" value="schedule" data-subtext="schedule schedule">Schedule</option>
</select>
<button style="margin-top:3em" data-option="classes" class="btn btn-primary trigger" type="button">Trigger for classes</button>
<button style="margin-top:3em" data-option="schedule" class="btn btn-primary trigger" type="button">Trigger for schedule</button>

如何为 select-picker 的特定选项动态隐藏数据子文本？

How to dynamically hide data-subtext for specific options for select-picker?

jquery

bootstrap-select

bootstrap-selectpicker