Dynamic combobox-listbox-drop-down using javascript
Want to populate dynamically combobox-listbox-drop-down using javascript? Let us see a very simple script to do this. First let us see createElement() of document object in javascript. 
//Create a table element dynamically
var table = document.createElement("table");

//Create a select element dynamically
var select = document.createElement("select");

//Create a option element dynamically
var option = document.createElement("option");

Code language: JavaScript (javascript)
Thus, createElement method takes a parameter which is the string that specifies the name for the element node and returns the element node. Let us see how can we populate a dropdown or combobox using this method. Following is the html file of our example: 
<HTML>
 <HEAD>
  <TITLE>Dynamically populating drop down, combobox, list box using JavaScript</TITLE>
  <SCRIPT language="javascript" src="config.js"></SCRIPT>
 </HEAD>
 <BODY style="font-family: sans-serif">

  <fieldset>
   <legend>Combo box</legend>
   Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/>
   <input type="button" value="Add" onclick="addCombo()">
   <br/>
   Combobox: <select name="combo" id="combo"></select>
  </fieldset>
 </BODY>
</HTML>

Code language: HTML, XML (xml)
And following is the javascript file: 
function addCombo() {
 var textb = document.getElementById("txtCombo");
 var combo = document.getElementById("combo");
 
 var option = document.createElement("option");
 option.text = textb.value;
 option.value = textb.value;
 try {
  combo.add(option, null); //Standard 
 }catch(error) {
  combo.add(option); // IE only
 }
 textb.value = "";
}

Code language: JavaScript (javascript)
Thus, when we provide a value in text box and click the Add button, a new option element is created using document.createElement method. The attributes of the option element are set using the method .setAttribute(). And finally the option is added to combo using .add() method.

Demo

Dynamic Listbox using JavaScript

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: dynamic combobox How-To JavaScript
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

4 years ago