disable an option of a dropdown list in selectize.js

Question

I use selectize.js for dropdown lists in my project. I have 3 dropdown lists related to each other. When I click an option from first dropdown list, some elements from second and third dropdown lists should be disabled. When I click an option from second dropdown list, some elements from third dropdown list should be disabled.

When I try some basic jquery or javascript methods to disable an option from dropdownlists, they don't affect. However, when I delete selectize.js classes from dropdownlists, they immediately affect, disable options that I want.

Here is my sample code for dropdownlists;

<div id="pro_yur_gru" class="row form-row">
    <div class="col-lg-4 col-md-4">
        <label class="form-label">Person</label>
        <select id="Person1" class="demo-default" name="PERSONLIST" onchange="my_onchange_function_to_remove_2_and_3()">
            <option value="">Select a person...</option>
            <option value="4">Albert</option>
            <option value="1">Frank</option>
            <option value="3">Doug</option>
            <option value="5">Arnold</option>
        </select>
        <script type="text/javascript">
            $('#Person1').selectize({
                allowEmptyOption:true,
                create: true,
                dropdownParent: 'body'
            });
        </script>
        </div>

</div>

<div id="pro_yur_gru2" class="row form-row">
    <div class="col-lg-4 col-md-4">
        <label class="form-label">Person 2</label>
        <select id="Person2" class="demo-default" name="PERSONLIST2" onchange="my_onchange_function_to_remove_3()">
            <option value="">Select a person...</option>
            <option value="4">Thomas</option>
            <option value="1">Mark</option>
            <option value="3">Nicholas</option>
            <option value="5">James</option>
            <option value="6">Matt</option>
            <option value="7">Kenny</option>
        </select>
        <script type="text/javascript">
            $('#Person2').selectize({
                allowEmptyOption:true,
                create: true,
                dropdownParent: 'body'
            });
        </script>
        </div>

</div>


<div id="pro_yur_gru_3" class="row form-row">
    <div class="col-lg-4 col-md-4">
        <label class="form-label">Person3</label>
        <select id="Person3" class="demo-default" name="PERSONLIST3">
            <option value="">Select a person...</option>
            <option value="1">Chuck</option>
            <option value="3">Alex</option>
            <option value="2">Donald</option>
            <option value="5">John</option>
            <option value="7">Dwayne</option>
            <option value="6">Kevin</option>
            <option value="4">Tim</option>
            <option value="8">Patrick</option>
        </select>
        <script type="text/javascript">
            $('#Person3').selectize({
                allowEmptyOption:true,
                create: true,
                dropdownParent: 'body'
            });
        </script>
        </div>

</div>

What I need is something like this;

to change <option value="4">Albert</option> to <option disabled value="4">Albert</option> by using a javascript function.

Edit: I use this project on IE10.

mrkiril · Accepted Answer · 2019-04-05 07:28:21Z

4

Disabled select options can also be achieved by overriding the render function.

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

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

Or uses plugin https://github.com/mondorobot/selectize-disable-options

answered Apr 5, 2019 at 7:28

mrkiril

1,25117 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

disable an option of a dropdown list in selectize.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related