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

Question

Select-picker

<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");

Hide subtext

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

I try to unset the data-subtext by hiding it but nothing happens.

This is my reference: Trying to set data-live-search to select-picker

UPDATE :

Thank you @HMZ for the solution!.

@Muqri When you want the `data-subtext` to be hidden? what triggers this behaviour? — HMZ, Nov 25 '20 at 05:02
i just wondering that if i can set "data-subtext" for each options, can i unset the "data-subtext" back or can i hide it after i set it. @HMZ — Muqri, Nov 25 '20 at 05:33
@Muqri I made a [JSFiddle](https://jsfiddle.net/vr1ywc2j/1/). Does this work for you? — HMZ, Nov 25 '20 at 05:35
Your solution is right and what i want to achieve but since im using document.querySelector to set the subtext, im still struggling to implement your solution into my code @HMZ — Muqri, Nov 25 '20 at 06:11
thank you so much @HMZ, i think i need to check my cdnjs. because the code work on JSFiddle. I might do something wrong somewhere. — Muqri, Nov 25 '20 at 07:12
@Muqri Glad it helped. Does this qualify as an answer to the question? — HMZ, Nov 25 '20 at 08:00
@Muqri I added the solution as an answer, make sure to mark it as accepted if the issue is resolved. — HMZ, Nov 25 '20 at 10:41
I already mark it as answer. I also already found the problem in my code and your solution is correct. @HMZ — Muqri, Nov 25 '20 at 14:19

score 1 · Accepted Answer · answered Nov 25 '20 at 08:20

As a proof of concept, i am using buttons to trigger changing the data-subtext of option elements but this can easily be triggered via some event or a different mechanism.

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>

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

1 Answers1