besmart besmart - 2 months ago 13
Ajax Question

AJAX - jQuery - triple dynamic dropdown menu

I'm trying to write a function to get a triple dropdown menu with auto populating of the 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...

Answer

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