How to get the selected dropdown list in edit modal with Laravel

Question

i am building a project with laravel where i am able to fetch the record from database into my modal but the problem is everytime do i update my modal then the options values in both the select also gets incremented with the same fetched result. How to avoid that. Here i am pasting two images before and after of edit and also what i have done till now. Please help me to complete it.

Before Image

After Image

My modal part

<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>

The script part

$(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,
        method:"GET",
        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,
        method:"GET",
        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;
});

The Controller part

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','active')->orderBy('id','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);

    }

Answer 1

In your jquery code you have use .append() to append new options inside your select-box which just insert new elements to the end of each element in the set of matched elements.So that's the reason it was showing double values.

Instead use .html() to replace all element which are there inside your select-box. So you just need to change :

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

To

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

Same you do for eproduct_category as well.