How to Select Multiple Items in Select Box Using jQuery

This tutorial will guide you about How to Select Multiple Items in Select Box Using jQuery. This jQuery plugin will help you to convert your simple HTML based Select Box into a stylish box in which your users will be able to select their desired items one by one and the items will move into selected items list. Further they can unselect any item by clicking an item from selected items list, and the selected items will be submitted when user submits the HTML Form.

How to Select Multiple Items in Select Box Using jQuery

We will be using jQuery plugin Multi Select for converting our HTML Select Box into a multiple items selector box. It’s usage is simple. See the example below:

Usage:


For using this plugin, we need to include the following files in our page:

  • jQuery Library.
  • Css File.
  • Multi-Select Plugin (.js) File.

HTML:

Here is the html code for showing which attributes will be added to HTML Select Tag for making it to work like a multi-selector:

In above code,  we are using an attribute multiple for telling the browser that this field is meant for selecting multiple items. Also we are using the attribute id=my-select. Our plugin will not work without assigning this id to our Select Box. You can further change this id to whatever you want. Another is the name attribute which will contain all selected items while Submitting Form. You can rename the value inside name attribute to whatever you want to use.

Note: If you change the id assigned to your select box, then don’t forget to change the id in Javascript below.

Javascript:

Now we are calling/activating the plugin in our page by including the following code:

You can see #my-select in above code. You can change it to whatever you want. But be sure that you use the same id here and in id attribute of your select box, otherwise this plugin will not work.

Our basic code for showing Multi Select Box is completed. Now lets have a look on some options offered by this great jQuery plugin:

Options:

Following are some customizations for Multi Select Plugin:

1. Pre-Select Desired Values From Select Box:

This option will enable you to define which items you want to Pre-Select from the list. So these items will be added to selected items list by default. See how to do this:

You can see that we have added an attribute: selected to the items which we want to pre-select. So you can assign this attribute to whatever item you want to add in Pre-Selected List.

2. Disabled Item:

By adding this option to any item from your list, that particular item will become dead, although it will still show in the list but user will not be able to select or deselect that item and it will remain on its place. (Disabled items shows in a different color and can easily be identified from list). Here is the code:

You can see that you will need to add an attribute: disabled to any item you want to disable. Above code will be added in HTML of the select tag options.

3. Select All:

By enabling this option, your Select Box will appear with all values pre-added in Select List. By this way, all values in select box will be submitted with the form if user does not Unselect any value from it. Here is how to add this option:

You just need to add the above code next to this line: $(‘#my-select’).multiSelect();

4. Deselect All:

This option will do the reverse of the above option. Means it will deselect all the items by default when showing in page. Here is it’s code:

This code will also be added same like the previous option.

5. Call Backs:

With this option, you can execute any Javascript Function when a user selects or deselects an item from the list. See example below:

 6. Opt-Groups:

If you want to show items in Groups, then this option is available. See an example:

 7. Custom Headers and Footers:

This plugin also gives an option for adding beautiful Custom Headers and Footers of your choice. It’s styling is also customizable as per your needs. Also, you can add different headers and different footers to Selectable Items and Selected Items list. See below example:

You can customize the styling of classes assigned to headers and footers.

How To Select Multiple Items In Select Box Using JQuery
How To Select Multiple Items In Select Box Using JQuery
How to Select Multiple Items in Select Box Using jQuery.zip
43.2 KiB
32 Downloads
Details

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

scroll to top