多個選擇框中的值在選中時消失

Question

因此，我有一個2個多選框（一個用於地板，另一個用於房間）。房間中的值取決於樓層。如果您選擇Floor：001，則Room中的所有值都將從1開始，如果選擇Floor：002，則Room中的所有值都將從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(); 
      });