Career At hSenid: August 2016

Thursday, August 25, 2016

populate a dropdown according to the selection in another dropdown

Suppose two dropdowns as dropdown1 andropdown2. I need to populate the dropdown2 with different values based on the selection in dropdown1. Following shows the two dropdown menus

<select class=" form-control" id="dropdown1">
    <option>--Select--</option>
    <option>Customer</option>
    <option>Staff Member</option>
</select>

<select class=" form-control" id="dropdown2" >
    <option value="None">None</option>
</select>

Following javascript code works fine. Values to be populated to dropdown2 are taken into two arrays. Switch statement is used to decide which array is to be populated based on the dropdown1 selection.

the function createFunction() will build up the <option> elements in the dropdown1 menu.

function configureDropDownLists(ddl1,ddl2) {
    var customer= ['None','Name', 'Registered Period', 'Area'];
    var staff = ['None','Designation', 'Department', 'Branch'];


    switch (ddl1.value) {
        case 'Customer':
            ddl2.options.length = 0;
            for (i = 0; i < customer.length; i++) {
                createOption(ddl2, customer[i], customer[i]);
            }
            break;
        case 'Staff Member':
            ddl2.options.length = 0;
            for (i = 0; i < staff.length; i++) {
                createOption(ddl2, staff[i], staff[i]);
            }
            break;

        default:
            ddl2.options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

 Finally configureDropDownLists(ddl1,ddl2)  function is called on

the dropdown1 menu as shown menu

<select class=" form-control" id="selectCustomer"    onchange="configureDropDownLists(this,document.getElementById('filterOption'))">

    <option>--Select--</option>
    <option>Customer</option>
    <option>Staff Member</option>
</select>

Including a html file in another html

Using jQuery following code perfectly works

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

By including an import

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

to access the content of the import use link element's .import property as below

var content = document.querySelector('link[rel="import"]').import;

Pages

Thursday, August 25, 2016

populate a dropdown according to the selection in another dropdown

Including a html file in another html