如何使用Laravel在编辑模式中获取选定的下拉列表

问题描述

我正在使用laravel构建一个项目，在这里我可以从数据库中获取记录到我的模态中，但是问题是每次我更新模态时，两个select中的options值也会以相同的获取结果递增。如何避免这种情况。在这里，我要粘贴编辑前后的两个图像，也要粘贴到现在为止。请帮我完成它。

图片之前

图片后

我的模态部分

<a href="javascript:void(0);" data-href="{{ url('admin/product_edit/'.$cat->id) }}" class="edit_product btn btn-sm btn-primary" data-toggle="modal" data-target="#editModal"> Edit</a>

<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="insertModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title font-weight-bold" id="insertModalLabel">EditCustomer</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                          <p><b>Please note:</b> Fields marked with <span class="control-label"></span> is mandatory</p>
                          <form action="{{ url('admin/update_product') }}" method="post" class="edit_database_operation">
                            @csrf
                            <input class="form-control" type="hidden" name="eid" id="eid">
                            {{-- <input class="form-control" type="hidden" name="brand_id" id="brand_id">
                            <input class="form-control" type="hidden" name="category_id" id="category_id"> --}}
                            
                            <div class="form-row">
                              <div class="form-group col-md-6">
                                <label for="eproduct_category" class="control-label">Product Category</label>
                                <select id="eproduct_category" class="form-control" name="eproduct_category">
                                </select>
                              </div>
                            
                              <div class="form-group col-md-6">
                                <label for="eproduct_brand" class="control-label">Product Brand</label>
                                <select id="eproduct_brand" class="form-control" name="eproduct_brand">
                                </select>
                              </div>
                            </div>     
                            
                                              

                            <button type="submit" class="btn btn-primary text-left">Submit</button>
                          </form>
                        </div>
                        
                    </div>
                </div>
              </div>

脚本部分

$(document).on('click','.edit_product',function(e){
    e.preventDefault();
    var url = $(this).attr('data-href');
    console.log(url);
    $.ajax({
        url:url,method:"GET",success:function(fb){
            var resp = $.parseJSON(fb);
            console.log(resp);
            $('#eid').val(resp.id);
            var brand_id = resp.brand_id;
            brand_edit(brand_id);
            var category_id = resp.category_id;
            category_edit(category_id);
        }

    });
    return false;
});

function brand_edit(brand_id){
    url = '/admin/edit_product_brand/'+brand_id;
    console.log(url);
    $.ajax({
        url:url,success:function(fb){
            console.log(fb);
            $('#eproduct_brand').append(fb);
        }
    });
    return false;

}

function category_edit(category_id){
    url = '/admin/edit_product_category/'+category_id;
    console.log(url);
    $.ajax({
        url:url,success:function(fb){
            console.log(fb);
            $('#eproduct_category').append(fb);
        }
    });
    return false;

}

$(document).on('submit','.edit_database_operation',function(e){
    e.preventDefault();
    var url = $(this).attr('action');
    var data = $(this).serialize();
    $.ajax({
        url:url,method:"POST",data:data,success:function(fb){
            var resp = $.parseJSON(fb);
            // console.log(resp);
            if(resp.status=='true'){
                toastr.success(resp.message,'Success');
                $('#editModal').modal('hide');
                $('.edit_database_operation')[0].reset();
                $("#example1").load(" #example1 > *");
                $("#example2").load(" #example2 > *");
                // $('.edit_database_operation')[0].reset();
                $("#eproduct_category").data("default-value",$("#eproduct_category").val());
            }else if(resp.status=='false'){
                    
                $.each( resp.message,function( key,value ) {
                toastr.error(value + '<br>','Error');
                });
                

            }else if(resp.status=='false-1'){
                toastr.error(resp.message,'Error');
            }

            
            
            
        }

    });
    
    return false;
});

控制器部分

public function product_edit($id){
        $edit = Product::where('id',$id)->first();
        $arr = array('id'=>$edit->id,'category_id'=>$edit->category_id,'brand_id'=>$edit->brand_id);
        echo json_encode($arr);
    }
    
    public function edit_product_brand($id){
        $brande = Brand::where('status','active')->orderBy('id','DESC')->get();
        $output = '';
        // $output .= '';
        foreach ($brande as $brand){
        $brand_id = $brand->id;
        $brand_name = $brand->brand_name;

        $output .= '<option value="'.$brand_id.'" '.(($brand_id == $id) ? 'selected="selected"':"").'>'.$brand_name.'</option>';

        }
        // $output .='</select>';

        return $output;
    }

    public function edit_product_category($id){
        $category = Category::where('status','DESC')->get();
        $output = '';
        if(!$category->isEmpty()){
            
            foreach ($category as $brand){
                $category_id = $brand->id;
                $category_name = $brand->category_name;
        
                $output .= '<option value="'.$category_id.'" '.(($category_id == $id) ? 'selected="selected"':"").'>'.$category_name.'</option>';
        
            }
            
        }

        return $output;
    }


    public function update_product(Request $request){

        $update = Product::where('id',$request->eid)->first();
        $validator = Validator::make($request->all(),[
            
            'eproduct_category'=>'required','eproduct_brand'=>'required',],[
            
            'eproduct_category.required'=>'Please enter product category','eproduct_brand.required'=>'Please enter product brand',]);
        if(!$validator->fails()){
            
                    $update->name = $request->eproduct_name;
                    $update->category_id = $request->eproduct_category;
                    $update->brand_id = $request->eproduct_brand;
                    if($update->update()){
                        $arr = array('status'=>'true','message'=>'Updated Successfully');
                    }else{
                        $arr = array('status'=>'false-1','message'=>'Not Updated');
                    }
        }else{
            $arr = array('status'=>'false','message'=>$validator->errors()->all());
        }
        echo json_encode($arr);

    }

解决方法

在您的jquery代码中，您已经使用.append()在选择框中添加了新选项，这些新选项仅将新元素插入到匹配元素集中的每个元素的末尾。这就是为什么它显示为double的原因值。

请改为使用.html()替换选择框中所有的元素。所以您只需要更改：

 $('#eproduct_brand').append(fb);

收件人

$('#eproduct_brand').html(fb);

您也为eproduct_category做过。