多个 select 框中的值在 selected 时消失

Question

所以我有一个 2 倍 select 盒子（一个用于地板，一个用于房间）。房间中的值取决于楼层。如果您选择楼层：001，房间中的所有值将从 1 开始，如果您选择楼层：002，房间中的所有值将从 2 开始，依此类推。但是当我 select 房间中的值时，所有值都会消失，这是我的脚本：

<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

我猜你应该添加活动来填充房间-select 仅在楼层-select

此代码将 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

您已对所有 select 应用通用 'change' 事件，这导致它被清除。

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

多个 select 框中的值在 selected 时消失

Values in multiple select box disappear when selected

javascript

java

jquery

multiple-select