How to dynamically create a drop-down list with JavaScript and jQuery?

Today, We want to share with you dynamic drop down list html.In this post we will show you flask dynamic drop down list, hear for drop-down box dependent on the option selected in another drop-down box we will give you demo and example for implement.In this post, we will learn about Vuejs Dynamic Dropdown Select Menu using json with an example.

how to load data dynamically to html dropdownlist?

1. JavaScript solution

document.getElementById('operators').onclick = function() {
 
  var langauages_list = ["Laravel", "Angualrjs", "Vuejs", "Magento"];
 
  var select = document.createElement("select");
  select.name = "programming_languages";
  select.id = "programming_languages"
 
  for (const val of langauages_list) {
    var option = document.createElement("option");
    option.value = val;
    option.text = val.charAt(0).toUpperCase() + val.slice(1);
    select.appendChild(option);
  }
 
  var label = document.createElement("label");
  label.innerHTML = "Choose your programming_languages: "
  label.htmlFor = "programming_languages";
 
  document.getElementById("mainadminpanel").appendChild(label).appendChild(select);
}

html source code

<html>
  <body>
    <div id="mainadminpanel"></div>
    <br>
    <div>
      <button id="operators">Operator</button>
    </div>
  </body>
</html>

2. jQuery solution

HTML Code

<html>
  <body>
    <div id="mainadminpanel"></div>
    <br>
    <div>
      <button id="operators">Operator</button>
    </div>
  </body>
</html>

js code

$(document).ready(function() {
  $('#operators').click(function() {
 
    var langauages_list = ["Laravel", "Angualrjs", "Vuejs", "Magento"];
 
    $('#mainadminpanel')
      .append(
        $(document.createElement('label')).prop({
          for: 'programming_languages'
        }).html('Choose your programming_languages: ')
      )
      .append(
        $(document.createElement('select')).prop({
          id: 'programming_languages',
          name: 'programming_languages'
        })
      )
 
    for (const val of langauages_list) {
      $('#programming_languages').append($(document.createElement('option')).prop({
        value: val,
        text: val.charAt(0).toUpperCase() + val.slice(1)
      }))
    }
  })
});

Alternatively Way

js code

$(document).ready(function() {
  $('#operators').click(function() {
    var langauages_list = ["Laravel", "Angualrjs", "Vuejs", "Magento"];
 
    var select = $('<select>').prop('id', 'programming_languages')
                    .prop('name', 'programming_languages');
 
    $(langauages_list).each(function() {
      select.append($("<option>")
        .prop('value', this)
        .text(this.charAt(0).toUpperCase() + this.slice(1)));
    });
 
    var label = $("<label>").prop('for', 'programming_languages')
                   .text("Choose your programming_languages: ");
 
    var br = $("<br>");
 
    $('#mainadminpanel').append(label).append(select).append(br);
  })
});

HTML code

<html>
  <body>
    <div id="mainadminpanel"></div>
    <br>
    <div>
      <button id="operators">Operator</button>
    </div>
  </body>
</html>

I hope you get an idea about html dependent drop down list.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.