多个选择框中的值在选中时消失

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