多个下拉列表显示基于第一个下拉列表的先前记录

Question

我有两个下拉字段。一个是子类别，另一个是最后一个子类别。当任何下拉值从子类别中选择时，然后基于在最后一个子类别中显示的一些结果，（但最后一个子类别选择将是多个。我添加了引导程序多选择）。

当我从最后一个子类别中删除 bootstrap-multi select 时。那么一切都很好。但是当添加 bootstrap-multi select 时，最后一个子类别的结果不变（意思是当我从子类别中选择第一个下拉值然后导致最后一个子类别时效果很好。但是当我从子类别中选择第二个选项时，最后一个子类别的结果仍然存在以前的记录。在 console.log 中，还会显示新记录。）

<div class="form-group col-md-6">

<label class="control-label">Last Sub Category<span style="color: red;">*</span></label>

<div class="search-category-container">

<label class="styled-select">

<select multiple="MULTIPLE" name="lastsubcategoryid" id="lastsubcategoryid">

</select>

</label></span>

</div>

</div>

在这里，我只显示最后一个子类别。子类别即将到来。阿贾克斯是：

<script type="text/javascript">

      $(document).ready(function(response){

         $("#subcategoryid").change(function(response){

             var id = $("#subcategoryid").val();

             $.ajax({

                type: "GET",

                url: "{{ url("getlastsubcategoryofsubcategory") }}",

                data: {'id': id},

                dataType: 'json',

                success: function (response) {

                    $('#lastsubcategoryid').empty();

                        if(response)

                        {

                            //alert(response);

                            //console.log(response);

                            $.each(response,function(key,value){

                                $('#lastsubcategoryid').append($("<option/>", {

                                   value: value,

                                   text: key

                                }));                                

                            });

                        }

                         $('#lastsubcategoryid').multiselect({

                                    includeSelectAllOption: true

                                });

                },

             });

          });

       });

我期待基于子类别的最后一个子类别的更改结果。但这并没有改变结果。只有第一次显示正确的结果，第二次之后它仍然相同。

在控制台结果是基于每个选择。当我删除引导程序多选时。它显示正确。

Answer 1

问题是你已经用值初始化了多选，所以仅仅更新选择是不够的，你必须在用新值更新选择后销毁/重建多选。像这样的东西：success: function (response) {&nbsp; &nbsp; $('#lastsubcategoryid').empty();&nbsp; &nbsp; if (response) {&nbsp; &nbsp; &nbsp; &nbsp; //alert(response);&nbsp; &nbsp; &nbsp; &nbsp; //console.log(response);&nbsp; &nbsp; &nbsp; &nbsp; $.each(response, function (key, value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#lastsubcategoryid').append($("<option/>", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value: value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: key&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; $('#lastsubcategoryid').multiselect('destroy');&nbsp; &nbsp; $('#lastsubcategoryid').multiselect({&nbsp; &nbsp; &nbsp; &nbsp; includeSelectAllOption: true&nbsp; &nbsp; });}