在 selectize.js 中禁用下拉列表的选项答案

【问题标题】：disable an option of a dropdown list in selectize.js在 selectize.js 中禁用下拉列表的选项
【发布时间】：2017-07-05 05:38:56
【问题描述】：

我在我的项目中使用 selectize.js 作为下拉列表。我有 3 个相互关联的下拉列表。当我从第一个下拉列表中单击一个选项时，应该禁用第二个和第三个下拉列表中的某些元素。当我从第二个下拉列表中单击一个选项时，应该禁用第三个下拉列表中的某些元素。

当我尝试一些基本的 jquery 或 javascript 方法来禁用下拉列表中的选项时，它们不会影响。但是，当我从下拉列表中删除 selectize.js 类时，它们会立即影响、禁用我想要的选项。

这是我的下拉列表示例代码；

<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>

我需要的是这样的；

使用 javascript 函数将 <option value="4">Albert</option> 更改为 <option disabled value="4">Albert</option>。

编辑：我在 IE10 上使用这个项目。

【问题讨论】：

标签： javascript jquery drop-down-menu selectize.js

【解决方案1】：

也可以通过覆盖渲染函数来实现禁用选择选项。

$('#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>';
    }
  }
});

或者使用插件https://github.com/mondorobot/selectize-disable-options

【讨论】：