ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Multiple Selection Listbox in JavaScript

Updated on August 9, 2018
timothy-malche profile image

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

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>

Is this article helpful to you?

See results

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      Pravin 

      4 weeks ago

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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)