отключить опцию dropdwonlist в selectize.js

Question

Я использую selectize.js для dropdownlists в моем проекте. У меня 3 dropdownlists связаны друг с другом. Когда я выбираю параметр из первого раскрывающегося списка, некоторые элементы второго и третьего dropdownlists должны быть отключены. Когда я выбираю параметр из второго раскрывающегося списка, некоторые элементы из третьего раскрывающегося списка должны быть отключены.

Когда я пытаюсь использовать некоторые стандартные jQuery или javascript методы, чтобы отключить параметр из dropdownlists, они не влияют. Однако, когда я удаляю selectize.js классы из dropdownlists, они сразу же затрагивают, отключают параметры, которые я хочу.

Вот мой пример кода для 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> 

Что мне нужно, это так;

изменить <option value="4">Albert</option> на <option disabled value="4">Albert</option> с помощью функции javascript.

Редактировать: Я использую этот проект в IE10.

Answer 1

После привязки Person1 вы можете отключить такое значение.

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

SampleFidddle