Question

我在项目中使用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上使用这个项目。

Answer 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

Answer 2

绑定Person1后，你可以禁用这样的值。

$("#Person1 [value*='4']").prop('disabled',true);

SampleFidddle

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

2 个答案: