Deaktivieren Sie eine Option einer Dropdwonlist in selectize.js

Question

Ich benutze selectize.js für Dropdown-Listen in meinem Projekt. Ich habe 3 Dropdown-Listen, die miteinander verwandt sind. Wenn ich auf eine Option aus der ersten Dropdown-Liste klicke, sollten einige Elemente der zweiten und dritten Dropdown-Liste deaktiviert werden. Wenn ich auf eine Option aus der zweiten Dropdown-Liste klicke, sollten einige Elemente aus der dritten Dropdown-Liste deaktiviert werden.

Wenn ich einige grundlegende jquery oder javascript-Methoden versuche, eine Option von Dropdown-Listen zu deaktivieren, haben sie keine Auswirkungen. Wenn ich jedoch selectize.js-Klassen aus Dropdown-Listen lösche, wirken sich diese sofort aus und deaktivieren die gewünschten Optionen.

Hier ist mein Beispielcode für Dropdown-Listen;

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

Was ich brauche, ist so etwas;

zu ändern <option value="4">Albert</option> zu <option disabled value="4">Albert</option> mit einer JavaScript-Funktion.

Edit: Ich verwende dieses Projekt auf IE10.

Answer 1

Nach Bindung Person1 können Sie Wert wie folgt deaktivieren.

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

SampleFidddle