3

Create dynamic DropDownList in HTML using JavaScript

 2 years ago
source link: https://www.js-tutorials.com/javascript-tutorial/dynamically-fill-html-dropdown-option-values-using-javascript/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Create dynamic DropDownList in HTML using JavaScript

This jquery tutorials help to dynamically populate HTML dropdown options values using non ajax manner. I haven’t used ajax request to generate HTML dropdown options values. We have two HTML dropdown element, one is select1 and other is select2 , the option values of select2 element is depend upon selected value of select1 element.We are creating drop down boxes options values dynamically using JavaScript.

So we are not making server-side requests to fill select2 dropdown values, we just fetch all HTML options values from server-side and store them into page JavaScript object on the load of the HTML page, we are emitting one Ajax server-side request and improving page performance.

We will follow the following steps to fill drop-down values using JavaScript and jQuery.

Dynamically generated select option dropdown menu using JavaScript

Step 1: We will get all necessary data of both dropdown listing on page load and stored into variable.
Step 2: We will convert that array into json object.You need to put below code into head section of index.html file.

var _data = {};
var _data = {"Env":{"dev":"Development","test":"Test"},"Org":{"dev":"Development Org","test":"Test Org"}};

Step 3: We will create a HTML Layout into the index.html file.

<div class="col-sm-4 row">
  <select class="form-control" id="env-select">
  <option value="">-- Select --</option>
       <option value="Env">Env</option>
      <option value="Org">Orgnisation</option>
  </select>
  </div>
  <div class="col-sm-4">
  <select class="form-control"  id="env_ddl">
  <option value="">-- Select --</option>
  </select>
  </div>

As you can see, I have created two select element , one HTML drop down list id is '#env-select' and second HTML drop down id is '#env_ddl', so main idea is that, we will select element from '#env-select' dropdown and based on value dynamically populate '#env_ddl' drop down list.

Step 4: We will iterate on json object and append to #env_ddl dropdown list.

$('#env-select').on('change', function(e){
        var source = $(this),
            val = $.trim(source.val()),
            target = $('#env_ddl');
      $(target).empty();
        if(typeof(_data[val]) != "undefined"){
            var options = (typeof(_data[val]) != "undefined") ? _data[val] : {};
       $('<option>-- Select --</option>').appendTo(target);
            $.each( options , function(value, index) {
                    $('<option value="' + value + '">' + index + '</option>').appendTo(target);

I am populating '#env_ddl' drop down list on change of '#env-select' drop down value, line #3 use to get selected value of '#env-select' drop down list,Line #5 use for empty the '#env_ddl' list.The Line #8-11 used for appending and setting options value to '#env_ddl' drop down list.

You can download source code and Demo from the below link.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK