Multiple select by chosen
Author
Author

Robert Nicjoo [68]

I love Laravel & WordPress, interested to pass little knowledge that I have to others.

Qr-Code

Scan to visit on mobile

TJD STUDIO is Hiring

Photographer & Videographer

Apply now Jabodetabek

Multiple select by chosen

Probably you all know select2 which is jQuery replacement for select boxes. Select2 has awesome functionality and design, personally like it very much however since Bootstrap 4.1.x became popular select2 start showing issues specially in styling.

Select2 developers and others tried hard to make it update with new bootstrap but due to lots of complains and questions about fixing this issues select2 so far wasn't able to fix the issue, they even provided special styles for supporting bootstrap 4 but I didn't finding it handy so I was looking for alternative solution till I found CHOSEN.

Chosen is similar with select2 but I think it has more interested options, however it comes with it's own style which isn't bad at all (we get into it in the following).

 

 

Overview

 

Chosen is jQuery library (package) for multiple select-boxes "just like select2".

Chosen has it's own styling (which is different with bootstrap "form-control" class)

Chosen can be find here

Full document can be find here

 

Styling

 

Default Style Custom Style With Bootstrap Style
cosen1 chosen2 chosen3

 

I think you get the idea now.

 

Working with chosen

 

You have to download chosen first and import css & js files into your view (chosen website link provided above)

After importing files into your page we will need to provide class for our select-box (we use documentation default class chosen-select)

 

Sample

 

<select data-placeholder="Select a Roles" class="chosen-select form-control" name="roles[]" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
</select>

 

//importing stylesheet
<link rel="stylesheet" href="{{asset('css/chosen.min.css')}}">

//importing js file
<script src="{{ asset('js/chosen.jquery.min.js') }}" defer></script>


//script
<script>
    $(document).ready(function() {
        $(".chosen-select").chosen();
    });
</script>

 

and that's all you need to work with chosen (simple isn't it?).

 

Another sample

Just before I publish this article I published another one "How to limit multiple select options" which I was talking about limiting user ability of selecting options in JavaScript. The good news is chosen has this option with it so we don't have to write extra functions for it. Take a look at sample below:

 

<script>
    $(document).ready(function() {
        $(".chosen-select").chosen({max_selected_options: 3});
    });
</script>

 

max_selected_options is obvious name for the job it's doing, will limit user of choosing more than provided number of options. In this case user is only able to select 3 options and no more. (for more options read chosen documentation)

 

Share your opinion about this article by clicking on emojis below.

How do you like this article?

Back to top