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