Laravel Question posted in
The official Laravel Documentation can be found here.

How to customize multiselect input in Laravel to show option names or number of selected options?

I am using a multiselect dropdown in a Laravel project, and I need to customize its behavior. Specifically, I want the input field to show the following:

  1. If fewer than 4 options are selected, display the names of the selected options in the input field (e.g., "Option 1, Option 2").

  2. If more than 3 options are selected, display a summary like "X selected" (e.g., "4 selected").

Here’s the HTML code I’m using for the multiselect:

<select class="multiselect @error('age_group_id') is-invalid @enderror" placeholder="Select event for" name="age_group_id[]" id="age_group_id" multiple>
@foreach ($age_groups as $ag)
    <option value="{{ $ag->id }}" {{ in_array($ag->id, old('age_group_id', ($is_update ? $event->age_group_id : []))) ? "selected" : "" }}>
        {{ $ag->name }}
    </option>
@endforeach

I’m using the Bootstrap Multiselect (or Select2, if that’s your case) library, and I want to ensure the following behavior:

  • When fewer than 4 options are selected, display their names.
  • When 4 or more options are selected, show something like "X selected" (e.g., "5 selected").

I’ve tried modifying the buttonText or templateSelection functions in the multiselect configuration, but I’m not sure how to implement this properly.

Can anyone provide an example or solution to help me achieve this behavior?

Expected Behavior:

  • With 2 options selected: "Option 1, Option 2"
  • With 5 options selected: "5 selected"

Additional Information:

  • I’m using Laravel, but I believe this is more related to the JavaScript configuration of the multiselect library.
  • Any help on customizing the multiselect input behavior would be appreciated!
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is working perfectly for me, but I'd like to add an alternative solution using the numberDisplayed option available in Bootstrap Multiselect. Here’s a working solution using that parameter:

    $('.multiselect').multiselect({
    numberDisplayed: 4,  // This will display up to 4 selected items
});

    In this case, numberDisplayed: 4 ensures that no more than 4 selected options are shown in the input field. If you select more than 4 options, the input field will display the summary text (e.g., "5 selected").

    The numberDisplayed option simplifies the implementation if you only want to limit the number of selected options displayed

    Thank you!


  2. 0

    Step 1: Add Bootstrap Multiselect to Your Project
    Include CSS and JS Files
    Add the Bootstrap Multiselect library to your project. You can use a CDN or download it:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>

    Ensure you also have jQuery and Bootstrap included in your project.

    Step 2: Multiselect HTML
    Add the multiselect dropdown in your Blade file:

    <select class="multiselect" name="age_group_id[]" id="age_group_id" multiple>
    @foreach ($age_groups as $ag)
        <option value="{{ $ag->id }}" {{ in_array($ag->id, old('age_group_id', ($is_update ? $event->age_group_id : []))) ? 'selected' : '' }}>
            {{ $ag->name }}
        </option>
    @endforeach
</select>

    Step 3: Add JavaScript to Customize the Multiselect Behavior
    Add the following JavaScript to handle the behavior of showing the option names or the count:

    $(document).ready(function () {
    $('.multiselect').multiselect({
        nonSelectedText: 'Select options',
        buttonText: function (options, select) {
            if (options.length === 0) {
                return 'Select options';
            } else if (options.length <= 3) {
                let selected = [];
                options.each(function () {
                    selected.push($(this).text());
                });
                return selected.join(', ');
            } else {
                return options.length + ' selected';
            }
        }
    });
});

    Expected Behavior
    If no options are selected, it shows: "Select options".
    If 3 or fewer options are selected, it shows their names, e.g., "Option 1, Option 2".
    If 4 or more options are selected, it shows: "X selected", e.g., "4 selected".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search