AJAX - jQuery -三重动态下拉菜单

Question

我正试图编写一个函数，以获得一个三重下拉菜单，自动填充<option>值。

我从2个JSON响应中得到这个值。

我在填充第二个下拉列表时没有问题，但是当尝试填充第三个下拉列表时，每个值都消失了。

这是(park -> piano -> 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

您在添加

时忘记了在最后一个select的option元素上使用<>

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