AJAX - jQuery - triple dynamic dropdown menu

Question

I'm trying to write a function to get a triple dropdown menu with auto populating of the <option> values.

I get this values from 2 JSON responses.

I have no problem when populating the second dropdown list, but when trying to the third, every value disappears.

This is the form (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>

Then the script is

<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>

Basically I try to populate the third list for every object of the second list...

damn errors at the power of 3 :)

madalinivascu
– madalinivascu

2016-09-28 07:54:28 +00:00
Commented Sep 28, 2016 at 7:54 — madalinivascu
– madalinivascu, Commented Sep 28, 2016 at 7:54

madalinivascu · Accepted Answer · 2016-09-28 07:57:54Z

1

You forgot the <> on the option element of the last select when appending

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

answered Sep 28, 2016 at 7:57

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

madalinivascu Over a year ago

note: you where binding the second change event multiple time ,taking the change event outside the loop & ajax removes that

Collectives™ on Stack Overflow

AJAX - jQuery - triple dynamic dropdown menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related