How to make a specific option unselectable programmatically with Selectize.js?

Asked 13/12, 2013 at 13:55 Answered 25/9, 2019 at 4:40

I have a select with several options and I try to make some of the options unselectable programmatically. For instance, my code is :

<select>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>
<script>
  $('select').selectize();
</script>

My question is: how can I make to get option "2" disabled (i.e. not displaying and not selectable) programmatically? -- I tried this code...

$('select')[0].selectize.$dropdown_content.find('[data-value="2"]').removeAttr('data-selectable');

... but it does not work (when I inspect the DOM I see that option "2" has no 'data-selectable' attribute, but it still renders and is selectable...).

Am I wrong here? And if so: what is the proper way to make an option unselectable (I can't find it anywhere in the doc)?

(I created a jsFiddle here: http://jsfiddle.net/j8YUA/3/)

Ehlke answered 13/12, 2013 at 13:55 Comment(2)

set display to none. – Gerfen 13/12, 2013 at 14:20

@Chris Thanks, but that does not work too. I created a jsFiddle to easily reproduce my issue: jsfiddle.net/j8YUA/1 – Ehlke 13/12, 2013 at 15:2

You can use the disabledField setting to make a selectize option "unselectable" programmatically when rendering the options. You can also make an option "unselectable" after the fact using the updateOption method (or you can simply remove the option using the removeOption method) For example:

const options = [
  {name: 'Option 1', disable: false},
  {name: 'Option 2', disable: true}
  ];

const sel = $('#select1').selectize({
  options: options,
  valueField: 'name',
  labelField: 'name',
  searchField: ['name'],
  disabledField: 'disable'
});

$('#button1').click(() => {
  sel[0].selectize.updateOption('Option 1', {name: 'Option 1', disable: true});
});

$('#button2').click(() => {
  sel[0].selectize.removeOption('Option 2');
});

<!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">
  </head>

  <body>

    <div>Option 2 disabled</div>
    <input id="select1" name="select1" type="text" />
    <button id="button1">Disable Option 1</button>
    <button id="button2">Remove Option 2</button>
    
    <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>

  </body>

</html>

Flatfooted answered 5/9, 2018 at 18:4 Comment(3)

This answer is very close to what I'm trying to do, but is it possible to hide the option instead of disabling it? I'm mainly asking for this question: #52726170 – Arhna 10/10, 2018 at 16:10

@JohnOdom - you can remove the option completely using the removeOption method. Is that what you are trying to do? – Flatfooted 11/10, 2018 at 3:1

No, but I'm aware of that. I think I have a working solution that I'll put up on my question once I finish testing it. – Arhna 11/10, 2018 at 19:14

Seems like disabledField is not implemented. alternatively, you can add a disabled property to the option you want to disable, and do the following:

$('#control').selectize({
  render: {
    option: function(item, escape) {
      if (item.disabled) {
        return '<div style="pointer-events: none; color: #aaa;">' + escape(item.label) + '</div>';
      }

      return '<div>' + escape(item.label) + '</div>';
    }
  }
});

(source: https://github.com/selectize/selectize.js/issues/224)

Aholah answered 25/9, 2019 at 4:40 Comment(0)

-1

Selectize options are stored in object $('select')[0].selectize.options, so to delete an option you should delete respective property from options object

 delete $('select')[0].selectize.options["2"];

Varitype answered 23/9, 2016 at 14:33 Comment(0)

Recommended topics

Hot tags