Cascading Dropdowns using Javascript

Question

I am trying to implement a cascading drop down using this. I'm not really familiar with Javascript but I think I'm on the right track. It should display the array values [0, 1, 2, 3] as opposed to the values ["Name", "Definition", "Owner"]

var typeObject = {
  StoredProcedures: ["Name", "Definition", "Owner"],
  Tables: ["Name", "Definition", "Owner", "Schema"],
  Views: ["Name", "Definition", "Owner"]
}
window.onload = function() {
    var typeSel = document.getElementById("typeSel"),
      fieldSel = document.getElementById("fieldSel")
    for (var type in typeObject) {
      typeSel.options[typeSel.options.length] = new Option(type, type);
    }
    typeSel.onchange = function() {
      fieldSel.length = 1; // remove all options bar first
      if (this.selectedIndex < 1) return; // done   
      for (var field in typeObject[this.value]) {
        fieldSel.options[fieldSel.options.length] = new Option(field, field);
      }
    }
    typeSel.onchange();

Bosco · Accepted Answer · 2019-07-13 00:26:43Z

2

I made a modification to your script

var typeObject = {
        StoredProcedures: ["Name", "Definition", "Owner"],
        Tables: ["Name", "Definition", "Owner", "Schema"],
        Views: ["Name", "Definition", "Owner"]
    }
    window.onload = function () {
        var typeSel = document.getElementById("typeSel"),
            fieldSel = document.getElementById("fieldSel")
        for (var type in typeObject) {
            typeSel.options[typeSel.options.length] = new Option(type, type);
        }
        typeSel.onchange = function () {
            fieldSel.length = 1; // remove all options bar first
            if (this.selectedIndex < 1) return; // done  
            var ft = typeObject[this.value];
            for (var field in typeObject[this.value]) {
                fieldSel.options[fieldSel.options.length] = new Option(ft[field], field);
            }
        }
        typeSel.onchange();
    }

<select name="optone" id="typeSel" size="1">
    <option value="" selected="selected">Select type</option>
</select>
<br/>
<br/>
<select name="opttwo" id="fieldSel" size="1">
    <option value="" selected="selected">Select field</option>
</select>

answered Jul 13, 2019 at 0:26

Bosco

1,5522 gold badges14 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

arrchar Over a year ago

With this script the drop downs will not open

Bosco Over a year ago

Please what do you mean the drop downs will not open? click on the Run code snippet and see the dropdown for yourself

arrchar Over a year ago

Apologies, cleared web data and restarted web app and this solution worked, much appreciated!

Aquaholic Over a year ago

Just to add - to have multi-worded terms (with spaces in between, like 'Stored Procedures' instead of forced single words like 'StoredProcedures', put double quote on ALL the terms "Stored Procedures"

Collectives™ on Stack Overflow

Cascading Dropdowns using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related