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

【问题标题】：multiple dropdown showing previous record based on first dropdown多个下拉列表显示基于第一个下拉列表的先前记录
【发布时间】：2019-12-21 21:11:30
【问题描述】：

我有两个下拉字段。一个是子类别，另一个是最后一个子类别。当从子类别中选择任何下拉值时，则基于最后一个子类别中显示一些结果，（但最后一个子类别选择将是多个。我添加了 bootstrap-multi select）。

当我从最后一个子类别中删除 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>

这里我只显示最后一个子类别。子类别即将到来。 ajax 是：

<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
                                });
                },
             });
          });
       });
   </script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
    rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
    type="text/javascript"></script>

路线是：

Route::GET('getlastsubcategoryofsubcategory','JobPostController@getlastsubcategoryofsubcategory');

控制器是：

public function getlastsubcategoryofsubcategory(Request $request)
    {
        $nations = lastsubcategorymaster::where('subcategorymasters_id', $request->id)->pluck('id','LastSubCategoryName')->toArray();      
        return response()->json($nations);
    }

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

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

【问题讨论】：

您能否在使用请求中的新值填充选项后尝试重建选择。 $('#lastsubcategoryid').multiselect('rebuild');
感谢您的回复...但是会在哪里添加呢？
谢谢你已经完成了....工作完美。

标签： php ajax laravel eloquent

【解决方案1】：

问题是您已经使用值初始化了多选，因此仅更新选择是不够的，您必须在使用新值更新选择后销毁/重建多选。

类似这样的：

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('destroy');

    $('#lastsubcategoryid').multiselect({
        includeSelectAllOption: true
    });
}

【讨论】：