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

Question

因此，我有2个多重选择框（一个用于地板，一个用于房间）。 房间中的值取决于楼层。 如果您选择Floor：001，房间中的所有值将从1开始，如果您选择Floor：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()但是如果我删除了room中的所有值都将显示，则将没有过滤器。 我希望有一个人可以帮助我。 新手在这里。 谢谢。

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