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()，但如果我删除会显示房间中的所有值，则不会有过滤器。我希望有一个人可以帮助我。新手在这里。谢谢。

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

Chang to，

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

选中时，多个选择框中的值将消失

2 个答案: