javascript jquery html html-select selectize.js

How to hide a selectize option programmatically?

I currently have a selectize drop-down that is suppose to have some options in it disabled and hidden depending on a list of strings that I have. Here is the non-selectize javascript function that I tried:

<!DOCTYPE html>
<html>

<body>

  <select onchange="ToggleSelectizeOptions(this.value)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="ford">Ford</option>
    <option value="hyundai">Hyundai</option>
    <option value="honda">Honda</option>
    <option value="porsche">Porsche</option>
  </select>

  <select id="selectize">
    <option value="">All Vehicles</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    <option value="ford">Ford</option>
    <option value="hyundai">Hyundai</option>
    <option value="honda">Honda</option>
    <option value="porsche">Porsche</option>
  </select>

  <script>
    function ToggleSelectizeOptions(ids) {
      var selectizeOptions = document.getElementById("selectize").options;
      var selectizeSingleOption;

      //We always start at 1 because index 0 always have "" as the value.
      for (var idx = 1; idx < selectizeOptions.length; idx++) {
        selectizeSingleOption = selectizeOptions[idx];
        if (ids) {
          if (ids.includes(selectizeSingleOption.value)) {
            selectizeSingleOption.style.display = "";
          } else {
            selectizeSingleOption.style.display = "none";
          }
        } else {
          selectizeSingleOption.style.display = "";
        }
      }
    }
  </script>

</body>

</html>

This works with dropdowns that are not selectize controls but I'm looking for a solution that would use selectize.js to do the same thing.

I saw this question that is similar to what I want, except the answer disables the option while I want to hide the option.

Solution

I am not aware of a way to "hide" selectize options (with display css or otherwise) other than simply removing them from the options array that is created when you initialize a selectize control. If that is all that you need to do, then you can remove a selectize option by using the selectize removeOption(value) method (see the working snippet below for an example).

Based on your code example, it looks like your ultimate goal is to create cascading dropdowns. If so, see the 2nd snippet below for an example.

const sel1 = $('#select1').selectize();
sel1[0].selectize.removeOption('ford');
sel1[0].selectize.refreshOptions();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
  </head>
  <body>
    <select id="select1">
      <option value="ford">Ford</option>
      <option value="honda">Honda</option>
    </select>
  </body>
</html>

If your ultimate goal is to create cascading dropdowns where the value selected in the first select element determines which options are available in a second select element. The snippet below initializes the options in the javascript rather than the html.

const models = [{text: 'Models', value: ''}];
const makes = [
  {text: 'Makes', value: ''},
  {text: 'Ford', value: 'ford'},
  {text: 'Honda', value: 'honda'}
];

const modelsByMake = {
  ford: [
    {text: 'Explorer', value: 'explorer'},
    {text: 'Expedition', value: 'expedition'}
  ],
  honda: [
    {text: 'Civic', value: 'civic'},
    {text: 'Accord', value: 'accord'}
  ]
};

const sel2 = $('#select2').selectize({
  options: models,
  items: [''],
  valueField: 'value',
  labelField: 'text',
  sortField: 'value',
  searchField: ['text'],
  load: (query, callback) => {
    let options = [];
    $.each(modelsByMake, (i, v) => {
      options = options.concat(v);
    });
    
    callback(options);
  },
  preload: true
});

const sel1 = $('#select1').selectize({
  options: makes,
  items: [''],
  valueField: 'value',
  labelField: 'text',
  sortField: 'value',
  searchField: ['text'],
  onChange: (value) => {
    let options = models;
    if (value) {
      // get models for selected make
      options = options.concat(modelsByMake[value]);
    } else {
      // get all models
      $.each(modelsByMake, (i, v) => {
         options = options.concat(v);
      });
    }
    
    sel2[0].selectize.clear(); // clear sel2 selected items
    sel2[0].selectize.clearOptions(); // clear sel2 options
    
    // load options corresponding to sel1 value in sel2
    sel2[0].selectize.load((callback) => {
      callback(options);
    });
    
    // refresh sel2 options list
    sel2[0].selectize.refreshOptions();
  }
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Selectize</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.default.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
  </head>
  <body>
    <select id="select1"></select>
    <select id="select2"></select>
  </body>
</html>