Dynamically Populating drop-down list from selection another drop-down value

Explain and write the JavaScript code to dynamically populate drop-down list from selection another drop-down value.
Submitted by Pratishtha Saxena, on April 24, 2022

JavaScript is one of the most widely used programming languages (Front-end as well as Back-end). In-browser JavaScript can do everything related to webpage manipulation, interaction with the user, and the webserver.

Dynamically populating a drop-down list from the selection of another list means that the selection of a value from list 1 gives respective values in list 2.

Example: Two drop-down lists are given labeled company and model respectively. If a company is chosen from list 1, let’s say Apple, then all the respective models should be seen in list 2. If the company in list 1 is changed then all the models in list 2 should also be changed according to it.

The JavaScript function for doing this is given below:

JavaScript Code:

    function  fillmobile() {
        case 1:
            var mb=["-Model-","Note 10 Lite","S21","M31","M51"]
         case 2:
            var mb=["-Model-","Iphone 13 Pro","Iphone 13","Iphone 13 Mini"]

         case 3:
            var mb=["-Model-","Redmi Note 6","Redmi Note 7","Redmi Note 7 Pro"]

function removeOptions(){
      for(var j=model.options.length-1;j>=0;j--)


function fillModel(mb){
    for(var i=0;i<mb.length;i++)
    { var opt=document.createElement("option")

HTML code to display this on a webpage is:

<!DOCTYPE html>
<html lang="en">
      <select id="company" onchange="fillmobile()">
      <select id="model">


Dynamically Populating drop-down list | Example

JavaScript Examples »

Related Examples

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.