AJAX - jQuery - 三重動態下拉菜單

Question

我正在嘗試編寫一個函數來獲取帶有自動填充<option>值的三重下拉菜單。

我從2個JSON響應中獲取這個值。

填充第二個下拉列表時我沒有問題，但嘗試第三個時，每個值都消失。

這是形式（公園 - >鋼琴 - > interruttore）

<select name="idPark" id="idPark" class="form-control"> 
    <option value=""><spring:message code="switch.park" /></option> 
    <c:forEach items="${parks }" var="park"> 
     <option value="${park.idPark }">${park.nomePark }</option> 
    </c:forEach> 
</select> 

<select name="idPiano" id="idPiano" class="form-control"> 
    <option value=""><spring:message code="switch.floor" /></option> 
    <c:forEach items="${piani }" var="piano"> 
     <option value="${piano.idPiano }">${piano.nomePiano }</option> 
    </c:forEach> 
</select> 


<select name="idInterruttore" id="idInterruttore" class="form-control"> 
<option value=""><spring:message   code="switch.switch_lamp_name" /> </option> 
    <c:forEach items="${interruttori }" var="interruttore"> 
    <option value="${interruttore.idInterruttore }">${interruttore.nomeInterruttore }</option> 
    </c:forEach> 
</select> 

然後腳本是

<script> 
    $(document).ready(
    function() { 
     $('#idPark').change(
     function(event) { 
      var parks = $("select#idPark").val(); 
      $.get('api/floor/park/${park.idPark }', { 
      idPark: parks 
      }, function(response) { 

      var select = $('#idPiano'); 

      select.find('option').remove(); 
      $.each(response, function(i, v) { 
       $('<option>').val(v.idPiano).text(v.nomePiano).appendTo(select); 
       select.change(function(event) { 
       var piani = $("select#idPiano").val(); 
       $.get('api/switch/${piano.idPiano}', { 
        idPiano: piani 
       }, function(response) { 
        var select2 = $('#idInterruttore'); 
        select2.find('option').remove(); 
        $.each(response, function(k, z) { 
        $('option').val(
         z.idInterruttore).text(
         z.nomeInterruttore) 
         .appendTo(select2); 
        }); 
       }); 
       }); 
      }); 
      }); 
     }); 
     }); 
</script> 

基本上我嘗試填充榜第三到第二份名單的每個對象...

Answer 1

您忘記了最後選擇的選項元素上的<>追加

$(document).ready(
    function() { 

    $('#idPark').on('change',function(event) { 
     var parks = $(this).val(); 
     $.get('api/floor/park/${park.idPark }', { 
     idPark: parks 
     }, function(response) { 

     var select = $('#idPiano'); 

     select.find('option').remove(); 
     $.each(response, function(i, v) { 
      $('<option>').val(v.idPiano).text(v.nomePiano).appendTo(select); 

     }); 
     }); 
    }); 


    $('#idPiano').on('change', function(event) { 
     var piani = $(this).val(); 
     $.get('api/switch/${piano.idPiano}', { 
     idPiano: piani 
     }, function(response) { 
     var select2 = $('#idInterruttore'); 
     select2.find('option').remove(); 
     $.each(response, function(k, z) { 
      $('<option>').val(z.idInterruttore).text(z.nomeInterruttore).appendTo(select2); 
     }); 
     }); 
    }); 
    });