Selecting Multiple options in Select element using jQuery

Selecting Multiple options in Select element using jQuery

In this article, we will learn how multiple options can be selected from a select element (drop down list). Also, we will learn to apply validation to the select element i.e.  we will assure that user selects at least one option in the select element. If user doesn’t selects any option from the select element, an error message is displayed

 

HTML file for “Selecting Multiple options in select element using jQuery”

Following is a HTML file that displays a drop down list box containing few food items. The select element with the help of which the drop down list is displayed is assigned the class name ‘infobox’ so as to apply the style properties defined in the class selector ‘.infobox’ (written in the style sheet file: style.css) can be directly applied to it. The label message: ‘Select the Food Item’ is displayed via span element with class name assigned : ‘label’. The error message is displayed via paragraph element with class name assigned as ‘error’ and the submit button is assigned a class name: ‘submit’. The HTML code may appear as shown below:

 

 

 

<form>

 

Select the Food Item

Select a FoodPizza HotDog Coke French Fries

 

You have not selected any Option

 

 

 

 

<input class=”submit” type=”submit” value=”Submit” /></p>

 

</form>

 

 

 

The MULTIPLE attribute when attached with select element will allow us to select more than on option (making use of Ctrl or Shift) key.

 

The external style sheet contains following class selectors that will be automatically applied to the respective HTML element of the specified class:

 

style.css

.label {float: left; width: 150px; }

.infobox {width: 150px; }

.error { color: red; padding-left: 10px; }

.submit { margin-left: 150px; margin-top: 10px;}

 

Code for “Selecting Multiple options in select element using jQuery”

The jQuery code to confirm that the option from the drop down list is selected is as shown below:

 

$ (document).ready(function() {

$ (‘.error’).hide();

$ (‘.submit’).click(function(event){

var count=$ (‘select option:selected’).val();

if(count==0)

{

$ (‘p.result’).hide();

$ (‘.error’).show();

}

else

{

$ (‘.error’).hide();

$ (‘p.result’).show();

$ (‘p.result’).text(‘You have selected ‘+$ (‘select option:selected’).text());

}

event.preventDefault();

});

});

 

In the style sheet file, the class selector: ‘.label’ contains the float property set to value: ‘left’ so as to make the label appears on its left (creating space for the drop down list to appear on its right) and the width property set to value 150px to define the width that the label can consume. The class selector: ‘.infobox’  contains the width property set to value 150px to specify the width for the drop down list  and the class selector ‘.error’ is for assigning red color to the error messages  and for making the error message appear at the distance of 10px from the left side of the browser window. The class selector ‘submit’ contains margin-left property set to value 150px to make the Submit button appear at the distance of 150px from the left side of the browser window (so that it appears below the drop down list) and margin-top property set to value 10px to keep some spacing from the above element that may appear (error or result message).

 

In the jQuery code, we initially hide the paragraph element of class ‘error’ meant to display error message. Then, we attach a click event to the submit button. The statement:

 

var count=$ (‘select option:selected’).val();

 

retrieves the value of the option selected from the select element and stores it in variable: count. If the value of count is 0, meaning user has not selected any option, we make the error message appear on the screen by making the paragraph element of class ‘.error’ visible and if the value of count variable is non zero, we make the paragraph element of class ‘result’ to display the result using the following statement:

You have selected ‘+$ (‘select option:selected’).text());

which displays the text of the option that is selected from the select element

 

On execution, if we press Submit button, we will get the message displaying all the options selected by the user from the select element as shown in below given figure :

 

Text messages of all selected options of select element displayed with a space in between

We can see that the options selected are displayed without any space in between. To separate the options with a comma (,) in between, we modify the jQuery code as shown below:

 

$ (document).ready(function() {

$ (‘.error’).hide();

$ (‘.submit’).click(function(event){

var selectedopts=”";

var count=$ (‘select option:selected’).val();

if(count==0)

{

$ (‘p.result’).hide();

$ (‘.error’).show();

}

else

{

$ (‘select option:selected’).each(function(){

selectedopts+=$ (this).text()+”,”;

});

$ (‘.error’).hide();

$ (‘p.result’).show();

$ (‘p.result’).text(‘You have selected ‘+ selectedopts);

}

event.preventDefault();

});

});

 

We have defined a string variable ‘selectedopts’ in above jQuery code and all the options selected from the select element are picked up by using .each() method and we concatenate them  to the ‘selectedopts’ variables along with a ,(comma). When the text of all the selected options is added to the ‘selectedopts’ variable, we display its contents via the paragraph element of class ‘result’. The output that we may get is as shown in below given figure :

 

Text messages of all selected options of select element displayed with a , (comma) in between

In case we don’t select any option from the select element and select Submit button, we may get an error message as shown in below given figure :

 

Error message displayed if none option is selected

This finishes my article on “Selecting Multiple options in select element using jQuery”

For more information, refer my book : “jQuery Recipes A Problem-Solution Approach” available at : http://www.amazon.com/jQuery-Recipes-Problem-Solution-Approach-Development/dp/1430227095/ref=sr_1_1?ie=UTF8&s=books&qid=1287320549&sr=8-1

 

 

---

Most Related Posts

• Validating select element in jQuery
• ADOBE 9A0-056 Practice Exam
• Hire an AJAX developer for best result