Значения в многократном поле выбора исчезают, если выбрано

Question

Итак, у меня есть 2 множественных блока выбора (один для пола и один для комнаты). Значения в комнате зависят от пола. Если вы выберете Пол: 001, все значения в Комнате начнутся на 1, и если вы выберете Пол: 002, все значения в Комнате начнутся в 2 и так далее. Но когда я выбираю значение в комнате все значений отпадут, вот мой сценарий:

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

Я думаю, что это из-за .empty(), но если я удалю, что все значения в комнате покажет, там будет не будет фильтра. Я надеюсь, что кто-то может мне помочь. Новичок здесь. Спасибо.

Answer 1

Я думаю, вы должны добавить событие для заполнения номер-выбери только в напольном выберите

Этого кода добавить событие OnChange для ВСЕХ выпадающих в вашем коде:

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

Изменения к этому:

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

Answer 2

Вы применили общее событие «изменения» на всех выбранных, которое заставляет его очищать.

//you have issue here , $(select) means all selects in your current DOM!  

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

Чанг,

// Apply change on specific instead 
$("select#floorId").change(function(){ 
       var arr = $(this).val() 
       selectArr.push(arr); 
       console.log(arr) 
       populateRooms(); 
       clearArray(); 
      });