when data added from drop down list the data should no longer be in drop down list

Question

i am trying to show only those countries name from drop down list which doesn't exist in database, for example if i add 'Bottles' to database the value 'Bottles' should no longer be in drop down list.

form.indx

<div class="form-group" id="frm_packages">
<select class="form-control" id="packages" name="packages"title="packages">

         <option value="Pack">Pack</option>
         <option value="Bottles">Bottles</option>
         <option value="Cartons">Cart</option>
         <option value="Boxes">Boxes</option>
         <option value="Cans">Cans</option>
         <option value="Bags">packages</option>
</select>
<div class="d-inline"></div>
</div>

//scripts show data

var table = $('#packageTable').DataTable({
    dom: 'Bfrtip',
    aaSorting: [[2, 'asc']],
    stateSave: true,
    processing: true,
    serverSide : false,
    bSortable: true,
    responsive : true,
    autoWidth : false,
    order: [[0, 'desc']],
    buttons: [
        'create', 'print', 'reload'
    ],

    ajax: '{{route('admin.packages.index')}}',
    columns: [
        {data: 'id', name: 'id'},
        {data: 'name', name: 'name'},

    ],
});

//Adding new data

$(document).on('click','#btnSave', function(e){
    e.preventDefault();
    $.ajax({
        url: "{{ route('admin.packages.store') }}",
        type: 'POST',
        dataType: 'json',
        data: {
            name: $('#packages').val(),

        },
        success:function(data){
            if (data.status == true) {
                $('#new').modal('hide');
                frm.trigger('reset');
                table.ajax.reload( null, false );
                Toast.fire({
                  type: 'success',
                  title: 'added successful'
                })
            }
        },

    });
});

//Controller

public function index(PackageDataTable $dataTable)
{
    return $dataTable->render('admin.packages.index');
}


public function store(Request $request)
{
     request()->validate(['name'=>['required','unique:packages'],]);
     Package::create(request()->all());
     return response()->json(array("status"=>true));
}

//model

protected $fillable = ['name'];    

public function products()
{
    return $this->belongsToMany(Product::class)
}

what should i do for not showing the existing data in drop down list

Answer 1

Initially, you should fetch all your data and then you must assign it to the js variables one by one because javascript is the language which will work for you on the client-side on your page. And then finally for the dropdown by applying if{} , else{} conditions you can get the desired results.