How To Set And Update Multiple Select Option With Select2 - ZsN Paper

On this occasion, we will discuss how to get values ​​from the database to be set to a multiselect form in select2. This can be used to update the value of the previously selected tags and will be replaced with the new tags.

I will give an example using the Laravel Framework and using the Spatie Permission library. Basically, this can be done in all frameworks.

Here is the database schema that I use

Role Table
- Id
- Name

Permission Table
- Id
- Name

Role_Permission Table
- Id
- Name

We will connect the role table to the permission table using the role_permission table, in other words, the role table and permission table have a many to many relationships.

Create a new controller, then create a show function to display the edit form.
The contents of the show function are like this

public function show(Role $role)
    {
        $permissions = Permission::get();
        $initPermissions = $role->permissions()->pluck('name')->toArray();

        return view('role.show', compact('role','permissions','initPermissions'));
    }

Explanation:
- $role = is the role data that will be updated to the permissions
- $permissions = is a collection of permission data from the permission table
- $initPermissions = is data permissions that have been added to a role and taken from the role_permissions table. Then take only the name of the role or the id of the role as needed and make it an array.

Here is the HTML form that will be created

<form action="{{ route('role.assign.permission',$role) }}" method="POST">
    @csrf
    <div class="row mt-2">
    <div class="col-md-4">
            <label>Permissions</label>
        </div>
        <div class="col-md-8">
            <select name="permissions[]" class="select2" multiple="multiple" data-placeholder="Select Permissions"
                style="width: 100%;">
                @foreach ($permissions as $permission)
                <option value="{{ $permission->name }}"
                    {{ in_array($permission->name,$initPermissions) ? 'selected' : '' }}>{{ $permission->name }}
                </option>
                @endforeach
            </select>
        </div>
    </div>
    <center class="mt-3">
        <button type="submit" class="btn btn-sm btn-primary">Save</button>
    </center>
</form>

Explanation:
- input select name must be made into an array, in above I name it with permissions[]
- then iterate the permissions set with foreach
- in the option give if else action, there I use {{in_array($permission->name, $initPermissions) ? 'selected' : ''}}. If permission name is in the initPermissions array then append the selected string, otherwise add nothing.

The last stage is to create a function to store the data

public function assignPermission(Request $request, Role $role)
    {
        $data = $request->validate([
            'permissions' => 'required'
        ]);

        $role->syncPermissions($data);

        return redirect()->back();
    }

Explanation:
- do validation on requests sent
- Synchronize permissions on roles that will change permissions. Here I use the Spatie Permission function if you use other libraries it can be adjusted.
- then do a redirect back to the page earlier

At this point, the stage of making the role change function has been completed. If you have any questions, please leave them in the comments column.

keywords: laravel permissions, spatie permissions, multiselect select2, multiselect laravel, retrive data multiselect, set data multiselect, set multiselect option, get multiselect value, update multiselect select2, codeigniter permission