Выпадающее меню jQuery 3 - onChange

Question

У меня есть три заброшенных меню. Каждое раскрывающееся меню заполняется в зависимости от выбора предыдущего выбора. Это означает, что выбор «селектора 2» основан на выборе «селектора 1», в то время как выбор «селектор 3» основан на выборе «селектор 2». Выпадающее меню динамически заполняется с помощью jquery, а источник - из таблицы MySQL.

Когда я выбираю «селектор 1», он заполняет «селектор 2», и когда я выбираю «селектор 2», он заполняет «селектор 3». Это прекрасно работает. Проблема заключается в том, что если у меня есть «селектор 1», «селектор 2» и «селектор 3», и я меняю «селектор 1», значение «селектор 2» теряется (как это должно быть), но значение «селектор 3» остается там. Я хочу, чтобы значение селектора 3 было сброшено, когда «селектор 1» был изменен и не сохранил старое значение предыдущего старого селектора.

Это мой JQuery

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script> 

    function getTertiary(val) { 
     $.ajax({ 
      type: "POST", 
      url: "get_tertiary.php", 
      data:'tertiary_cat='+val, 
      success: function(data){ 
       $("#tertiary_cat").html(data); 
      } 
     }); 
    } 


    function getSecondary(val) { 
     $.ajax({ 
      type: "POST", 
      url: "get_secondary.php", 
      data:'primary_cat='+val, 
      success: function(data){ 
       $("#secondary_cat").html(data); 
      } 
     }); 
    } 

    function selectPrimary(val) { 
     $("#search-box").val(val); 
     $("#suggesstion-box").hide(); 
    } 
</script> 

Это мой HTML:

<div class="frmDronpDown"> 
    <div class="row"> 
     <label>Primary:</label><br/> 
     <select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);"> 
      <option value="">Select Primary</option> 
      <?php 
      foreach($results as $primaryCat) { 
       ?> 
       <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option> 
       <?php 
      } 
      ?> 
     </select> 
    </div> 
    <div class="row"> 
     <label>Tertiary:</label><br/> 
     <select name="secondary_cat" id="secondary_cat" class="demoInputBox" onChange="getTertiary(this.value);"> 
      <option value="">Select Seconary</option> 
     </select> 
    </div> 
    <div class="row"> 
     <label>State:</label><br/> 
     <select name="tertiary_cat" id="tertiary_cat" class="demoInputBox"> 
      <option value="">Select Tertiary</option> 
     </select> 
     <input type="text"/> 
    </div> 
</div> 

Когда я попробовал - изменить

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);"> 

к:

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);getTertiary(this.value);"> 

Я получаю эту ошибку в error_log

PHP Warning: Invalid argument supplied for foreach() 

Answer 1

Сбросить значение третьего DDown on Re stetting второй такой:

function getSecondary(val) { 
    $.ajax({ 
     type: "POST", 
     url: "get_secondary.php", 
     data:'primary_cat='+val, 
     success: function(data){ 
      $("#secondary_cat").html(data); 
      $("#tertiary_cat").html('<option value="">Select Tertiary</option>') 
     } 
    }); 

} 

Answer 2

Может быть значение $results не массив, так что добавьте чек здесь будет решить вашу проблему

<?php 
if (is_array($results)){ 
    foreach($results as $primaryCat) { 
     ?> 
      <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option> 
     <?php 
    } 

} 
?> 

Answer 3

вы можете изменить getSecondary, чтобы очистить 3r d, когда первичный изменяется следующим образом:

function getSecondary(val) { 
    $.ajax({ 
     type: "POST", 
     url: "get_secondary.php", 
     data:'primary_cat='+val, 
     success: function(data){ 
      $("#secondary_cat").html(data); 
      $('#tertiary_cat').html('<option value="">Select Tertiary</option>') 
     } 
    }); 
}