Farah Aidina
Farah Aidina

Reputation: 115

Disable selected option in multiple select html

I want to disable all option on "MULTIPLE SELECT" that has been selected in "SELECTED" list

Ilustration

For the multiple select, I got the list from database using foreach:

@foreach($category as $item)
  <option value="{{$item->id}}">{{$item->name}}</option>
@endforeach

Is there anything I can do for this case? Should I compare the list database into the selected list database? If yes, then how?

Upvotes: 0

Views: 206

Answers (2)

Guna Wirawan
Guna Wirawan

Reputation: 68

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<select class="js-example-basic-multiple" name="category []" multiple="multiple">
   @foreach($category as $item)
       <option value="{{$item->id}}" {{ in_array($selected, $item->id) ? 'selected' :'' }}>{{$item->name}}</option>
    @endforeach
</select>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});

Hope this works

Upvotes: 0

Kevin
Kevin

Reputation: 193

    @foreach($category as $item)
       <option value="{{$item->id}}" {{ in_array($selected, $item->id) ? 'disabled' :'' }}>{{$item->name}}</option>
    @endforeach

Where $selected is a simple array of already selected values that are keyed to the option ID's.

Upvotes: 0

Related Questions