Skip to main content
Updated date:

Multiple Selection Listbox in JavaScript

Timothy is an enthusiast programmer and loves developing websites. He is expert in HTML, CSS, JavaScript, PHP, C#, and ASP[dot]NET.

multiple-selection-listbox-in-javascript

Before going through this article I would like to encourage you to please go through my other article on dropdown list. It will help you understand this article.

In this article I am going to illustrate following

  • How to enable multiple selection in listbox.
  • How to populate value in second listbox from values of first listbox including the multiple selection in first listbox.
  • How to use static array in JavaScript and access its values.

for example, suppose if first listbox displays two list items "Food" and "Drink" then selecting "Food" from first listbox, the second listbox should display all available food items. Similarly selecting item "Drink" from first listbox, second listbox should display all available drink items. However, If both the "Food" and "Drink" options are selected in first listbox, the second listbox should display both food and drink options available.


see figure 1 below. The output displays first listbox with two options and second empty listbox.

Figure 1

Figure 1

See output in figure 2 when user select "Food" from first listbox.

Figure 2

Figure 2

Similarly as in fugure 3, the items related to drink is displays when user selects "Drink" from first listbox.

Figure 3

Figure 3

And when user select both items i.e. "Food" and "Drinks" from first listbox, the second listbox displays all items for both the categories as shown in figure 4.

Figure 4

Figure 4

and further selection or deselection of any items in first listbox will update second listbox accordingly.

To implement such functionality first create two lists boxes using simple HTML as shown in code below.

 <form>
    <h4>Food Type</h4>
    <select class='form-control'  id='firstList' name='firstList'  onClick='getFoodItem()' multiple>
    </select>
    
    <h4>Food Item</h4>
    <select class='form-control'  id='secondList' name='secondList' size="12">
    </select>
</form>

remember to add attribute multiple in first listbox. This will allow users to select more than one list item from listbox using CTRL key. Otherwise user will not be able to select multiple items.

now add code in javascript to load item in first listbox as soon as page is displayed in web browser.

$(document).ready(function () {
		 
		var list1 = document.getElementById('firstList');
		 
		list1.options[0] = new Option('Snacks', 'Snacks');
		list1.options[1] = new Option('Drinks', 'Drinks');
});

after this add the main logic. The main logic is implemented inside getFoodItem() function which is a JavaScript function and will be invoked as soon as one or more items are selected in the listbox, here in this example the first listbox because the methos is bound to it using OnClick attribute. The logic is as following.

function getFoodItem(){
         var list1 = document.getElementById('firstList');
         var list2 = document.getElementById("secondList");
         list2.options.length=0;
        
      var food = ["Burger", "Pizza", "Hotdog", "Potato Chips", "French Fries"];
	  var drink = ["Coca Cola", "7up", "Pepsi", "Coffee", "Tea", "Green Tea"];

	   var i=0;
		   
		   for (var c=0;c<list1.length;c++) {
				 if(list1[c].selected) {
				   if (list1[c].value=='Snacks') {
						for (var j=0;j<food.length;j++){
							list2.options[i++] = new Option(food[j], food[j]);
						}
					}
					
				   if (list1[c].value=='Drinks'){
						for (var k=0;k<drink.length;k++) {
							list2.options[i++] = new Option(drink[k], drink[k]);
						}
					}
				 }
			}
}

in the finction above I have also created static array in javascript named 'food' and 'drink'. The syntax for creating is given below.

var arrayName = [value-1, value-2, ... value-n];

The values of arrays can be accessed using index numbers as following.

arrayName[index];

For example

food[0]
food[1]

or using loop

for ( var index = 0; index < food.length; index ++ ){

	food[index];
}

where food.length returns the length of array food.

The logic uses three loops. The first is the outer loop for traversing all items in first listbox. The condition inside this outer loop checks whether or not any item is selected and other two nested conditions checks which item is selected.

Inside these conditions the other two loops are specified to traverse through all items of the two arrays and to add them to second listbox.


To run this example you may also need to include JQuery library because the function $(document).ready(function () {});is used. JQuery can be included by downloading it's local copy or directly from CDN. The example for including it from CDN is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Comments

Timothy Malche (author) from Jabalpur, M.P., India on December 28, 2018:

Can you plz explain problem you are facing.

Thanks.

r kumar on December 26, 2018:

not properly work this code

Pravin on October 20, 2018:

Hi sir ... I want such type of code that where I can by select any product price should be automatically display plz help

Related Articles