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); 
     }); 
     }); 
    }); 
    });