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.

Read Also:  jquery add active class to current menu item

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *