Populate dropdown list from another dropdown list

Active3 hr before
Viewed126 times

4 Answers


This will dynamically populate both selects:, Meta Stack Overflow ,How can I dynamically populate the menu B based on what the user selects in menu A?, Stack Overflow Public questions & answers

var diction = {
  A1: ["B1", "B2", "B3"],
  A2: ["B4", "B5", "B6"]

// bind change event handler
$('#A').change(function() {
  // get the second dropdown
      // get array by the selected value
      // iterate  and generate options
      .map(function(v) {
        // generate options with the array element
        return $('<option/>', {
          value: v,
          text: v
    // trigger change event to generate second select tag initially
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="dynamicForm">
   <select id="A">
      <option value="A1">A1</option>
      <option value="A2">A2</option>
   <select id="B">
load more v

I have  two dropdownlists and trying to populate second dropdownlist based on selection of item of another(first) dropdownlist.First dropdownlist contain class number and according to the class number the second dropdownlist should show the subjects from database.,i have 3 dropdown list box 3rd dropdown populate depending on 2nd drop down and 2nd drop down populate depnding on 1st value of drop down in asp .NET C#  plz help me ,set Autopostback = true fro first dropdownlist in your aspx page and on selectedIndexChange event get the records of second dropdownlist ,Or use Cascade dropdownlist


Our next step is to populate these lists using the following piece of JavaScript code.,If you don’t know how to add JavaScript to HTML page, follow the link below,Timothy is an enthusiast programmer and loves developing websites. He is expert in HTML, CSS, JavaScript, PHP, C#, and ASP[dot]NET.,Thanks this code is helpfull for me.but next step i want to multiple dropdown same display.

   <div class="col-md-4">
         <h4>Food Type</h4>
         <select class="form-control" id='firstList' name='firstList' onClick="getFoodItem()">

         <h4>Food Item</h4>
         <select class="form-control" id='secondList' name='secondList'>

load more v

Initializing a dependent dropdown in this way also gives you an opportunity to display an informational message (e.g., "select a country first") before populating the list values.,Populating the list values for a dropdown field on an HTML form requires an event on the client side. This technique uses the jQuery JavaScript library to bind an event handler to the Change event of the Country dropdown. Whenever the user selects a value in the Country dropdown, the event fires and the JavaScript code executes.,Notice that for each property for which we're going to provide dropdown lists, we have two fields in the view model:,We'll start with the essential code for implementing a dropdown list populated when the view model is created.

1using System.Collections.Generic;
2using System.ComponentModel.DataAnnotations;
3using System.Web.Mvc;
5namespace BlipDrop.ViewModels
7    public class CustomerEditViewModel
8    {
9        [Display(Name = "Customer Number")]
10        public string CustomerID { get; set; }
12        [Required]
13        [Display(Name = "Customer Name")]
14        [StringLength(75)]
15        public string CustomerName { get; set; }
17        [Required]
18        [Display(Name = "Country")]
19        public string SelectedCountryIso3 { get; set; }
20        public IEnumerable<SelectListItem> Countries { get; set; }
22        [Required]
23        [Display(Name = "State / Region")]
24        public string SelectedRegionCode { get; set; }
25        public IEnumerable<SelectListItem> Regions { get; set; }
26    }
load more v

Other "dropdown-undefined" queries related to "Populate dropdown list from another dropdown list"