依存するセレクトボックスJSとJQuery - 最後のボックスが機能しない

Question

いくつかの依存セレクトボックスの下のコードを見つけましたが、何らかの理由で4番目のセレクトボックスを追加できません - htmlで表示できますが、フィールド9が記入されたときも空です。 何か理由がありますか？

4つの選択ボックス（field6、field8、field9、field1）が必要です。 フィールド8は、フィールド6で選択した値に基づいて入力する必要があります。フィールド9はフィールド8に基づいており、フィールド1はフィールド9に基づいています。 コードはフィールド9まで機能しています。私はその後、コードをコピーし、正しい参照で調整し、field1を作成しました。しかし、そのフィールドにはデータが入力されておらず、ドロップダウンは空白として表示されます。

私はこのクエリが3つのボックスの最大値であると考えていますか？最後の箱を作る方法はありますか？機能変更（）は動作しないよう

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
     <!-- ****************For State Loads Starts***************************--> 
     $("#field6").change(function (e){ 
     var state = 
     { 
     '0': ['Not Available'], 
     '':['Select Country'], 
     'Z1':['AU','CH'], 

     }  
     var value = this.value; 
     // Access the object like city['CT'] .. That gives the Array 
     state[value] !== undefined ? state[value] : '0';         
     var stateOptions = state[value];   
     var $field8 = $('#field8'), 
     $field9 = $('#field9'); 
     $field1 = $('#field1'); 
     $field1.html(''); 

     $field8.html(''); // clear the existing options 
     $field9.html(''); // clear the existing options     
     $.each(stateOptions, function (i, o) { 
     $('<option>' + o + '</option>').appendTo('#field8'); 
     });// ------------>each end tag   
     });//----------------->on-change end tag 
     <!-- ****************For State Loads Ended***************************--> 
     <!-- ****************For type Loads Starts***************************--> 
     $("#field8").change(function (e){  
     var type = 
     { 
     '0': ['Not Available'], 
     'AU' : ['TEST'], 
     'CH' : ['TEST1'], 

     } 
     var value = this.value; 
     type[value] !== undefined ? type[value] : '0'; 
     var typeOptions = type[value]; 
     var $field9 = $('#field9');    
     $field9.html(''); // clear the existing options 
     $.each(typeOptions, function (j, k) { 
     $('<option>' + k + '</option>').appendTo('#field9'); 
     });// ------------>each end tag 
     });//----------------->on-change end tag 
     <!-- ****************For type Loads Ended***************************--> 
     <!-- ****************For type2 Loads Starts***************************--> 
     $("#field9").change(function (e){  
     var type2 = 
     { 
     '0' : ['Not Available'], 
     'TEST' : ['this should appear in the fourth box'], 
     'TEST1' : ['this should appear in the fourth box'] 


     } 
     var value = this.value; 
     type2[value] !== undefined ? type2[value] : '0'; 
     var type2Options = type2[value]; 
     var $field1 = $('#field1');    
     $field1.html(''); // clear the existing options 
     $.each(type2Options, function (j, k) { 
     $('<option>' + k + '</option>').appendTo('#field1'); 
     });// ------------>each end tag 
     });//----------------->on-change end tag 
     <!-- ****************For type2 Loads Ended***************************--> 
     }); //-------------------->ready end tag 
     </script> 


     <div id="formElement6" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" > 
     <div class="field-wrapper" style="float: left; width: 100%; clear: both" > 
     <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" > 
     <p style="position: relative; margin: 0px; padding: 0px" class="custom-select"> 
     <label for="Country"><b>SELECT</b></label> 
     <select id="field6" name="Country" style="width: 10%"> 
     <option value="" selected="selected" >Select</option> 
     <option value="Z1" >FIRST</option> 

     </select> 
     </p> 
     </div> 
     </div> 
     </div> 
     <div id="formElement7" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px" > 
     <div class="field-wrapper" style="float: left; width: 100%; clear: both" > 
     <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" > 
     <p style="position: relative; margin: 0px; padding: 0px" > 
     <input id="field7" type="hidden" name="DataSource" value="" /> 
     </p> 
     </div> 
     </div> 
     </div> 
     <div id="formElement8" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" > 
     <div class="field-wrapper" style="float: left; width: 100%; clear: both" > 
     <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" > 
     <p style="position: relative; margin: 0px; padding: 0px" class="custom-select"> 
     <label for="state" style="font-family=PT Sans" ><b>Country</b></label> 
     <select id="field8" name="state" style="width: 15%"> 

     </select> 
     </p> 
     </div> 
     </div> 
     </div> 
     <div id="formElement9" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" > 
     <div class="field-wrapper" style="float: left; width: 100%; clear: both" > 
     <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" > 
     <p style="position: relative; margin: 0px; padding: 0px" class="custom-select"> 
     <label for="type"><b> Type</b></label> 
     <select id="field9" name="type" style="width: 15%" > 


     </select> 
     </p> 
     </div> 
     </div> 
     </div> 

     <div id="formElement10" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" > 
     <div class="field-wrapper" style="float: left; width: 100%; clear: both" > 
     <div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" > 
     <p style="position: relative; margin: 0px; padding: 0px" class="custom-select"> 
     <label for="type2"><b>Type2 </b></label> 
     <select id="field1" name="type2" style="width: 40%" > 

     </select> 
     </p> 
     </div> 
     </div> 
     </div> 

Answer 1

$("#field8").change(function (e){  
     var type = 
     { 
     '0': ['Not Available'], 
     'AU' : ['TEST'], 
     'CH' : ['TEST1'], 

     } 

field9にはオプションがあります。 選択ボックスにはデフォルトオプションを設定できます。 例：

{ 
'AU' : ['default','TEST'], 
'CH' : ['default','TEST1'], 
}