如何动态隐藏选择选择器特定选项的数据子文本？答案

【问题标题】：How to dynamically hide data-subtext for specific options for select-picker?如何动态隐藏选择选择器特定选项的数据子文本？
【发布时间】：2020-11-25 16:20:22
【问题描述】：

选择器

<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 的解决方案！

【问题讨论】：

你的html代码中#class在哪里？
对不起，我的错误是“类”
@Muqri 我做了一个JSFiddle。这对你有用吗？
@Muqri 看到这个JSFiddle。
我已经将其标记为答案。我也已经在我的代码中发现了问题，并且您的解决方案是正确的。 @HMZ

标签： jquery bootstrap-select bootstrap-selectpicker

【解决方案1】：

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

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>

【讨论】：