Kendall H. Kendall H. - 10 days ago 5
Java Question

Values in multiple select box disappear when selected

So I have a 2 multiple select box (one for the floor and one for the room). This is how it looks:

enter image description here

The values in the Room depends on the Floor. If you choose Floor: 001 all the values in the Room will start on 1 and if you choose Floor: 002 all the values in the Room will start in 2, and so on. But when I select the values in the Room all of the values will disappear, here's my script:

<script type="text/javascript">
$(document).ready(

function()
{
var selectArr = [];
$("select").change(function(){
var arr = $(this).val()
selectArr.push(arr);
console.log(arr)
populateRooms();
clearArray();
});


function clearArray() {
return selectArr = []
}

function populateRooms() {
$.ajax({

type: "GET",
url: "/hms/shifts/" + selectArr,
success: function (response) {
$('#_rooms_id').empty();
var myObject = eval('(' + response + ')');
for (i in myObject)
{
$('#_rooms_id').append(
$('<option></option>',
{
value: myObject[i]["id"],
text: myObject[i]["roomNumber"]
}
)
);
}

},
error: function (e){
alert("Error" + e)
}
});
}

});

</script>


I think it's because of the
.empty()
but if I remove that all of the values in room will show, there will be no filter. I hope someone can help me. Newbie here. Thank you.

Answer

I guess you should add the event to populate rooms-select only in the floor-select

This code add the onChange event to ALL dropdowns in your code:

 $("select").change(function(){
              var arr = $(this).val()
               selectArr.push(arr);
               console.log(arr)
               populateRooms();
               clearArray();
            });

Change to this:

$("#floors-dropdownId").change(function(){
              var arr = $(this).val()
               selectArr.push(arr);
               console.log(arr)
               populateRooms();
               clearArray();
            });
Comments