如何使用多级JSON生成多个选择？

Question

我的最终目标是基于下面使用的JSON文件创建一系列单独的<select>元素。

我希望在不同的select元素中使用每个对象的键作为<option>。例如，最高层将是：

<select>
  <option value = "Admin">Admin</option>
  <option value = "Combined Services App">Combined Services App</option>
  ...
</select> 

然后，下一个级别将是一个独立的<select>元素，其中包含Admin的所有键，Admin的所有键的选择，等等。

我已经做了不止几次尝试，但我无法完全理解递归。理想情况下，我希望预先生成select语句，这样我就可以根据顶层菜单将它们压缩起来。

有什么建议吗？我完全愿意接受我的方法有缺陷的可能性。理想情况下，我希望避免使用外部库，不幸的是，为此我不得不使用JSON。我意识到DB会在心跳中解决这个问题。

JSON

{
  "Admin": {
    "Authentication (Admin)": {
      "SIP2 (Admin)": {}
    },
    "Enhancement (Admin)": {},
    "Login (Admin)": {
      "Password Reset(Admin)": {},
      "Permission (Admin)": {}
    },
    "MARC Records (Admin)": {},
    "Marketing Materials": {},
    "Reports (Admin)": {
      "Bug Report (Admin)": {},
      "Enhancement Request(Admin)": {}
    },
    "Sales Lead (Admin)": {},
    "Subscription / Purchased Title (Admin)": {}
  },
  "Combined Services App": {
    "Books (CSA)": {
      "Audiobooks (CSA)": {},
      "eBooks (CSA": {}
    },
    "Education (CSA)": {
      "Artistworks (CSA)": {},
      "Hoonuit (CSA)": {},
      "The Great Courses": {},
      "Transparent Language (CSA)": {}
    },
    "Games & Music (CSA)": {
      "Qello Concerts (CSA)": {}
    },
    "Magazines & Comics (CSA)": {
      "Comics (CSA)": {},
      "Magazines (CSA)": {}
    },
    "Video (CSA)": {
      "Acorn TV (CSA)": {},
      "BroadwayHD (CSA)": {},
      "Indieflix (CSA)": {},
      "Pongalo (CSA)": {}
    }
  },
  "Combined Services Website": {
    "Books (CSW)": {},
    "Education (CSW)": {
      "Langauge Learning (CSW)": {},
      "Music & Art Instruction (CSW)": {},
      "Software Training (CSW)": {},
      "The Great Courses (CSW)": {}
    },
    "Games & Music (CSW)": {},
    "Magazines & Comics (CSW)": {},
    "Video (CSW)": {
      "Acorn TV (CSW)": {},
      "Indieflix (CSW)": {},
      "Pongalo (CSW)": {},
      "Stingray Qello (CSW)": {},
      "The Great Courses (CSW)": {}
    }
  },
  "eAudiobooks": {
    "Functionality (eAudiobooks)": {
      "Apps (eAudiobooks)": {},
      "Checkout / Hold / Renew / Return (eAudiobooks)": {},
      "Download (eAudiobooks)": {},
      "Failure (eAudiobooks)": {},
      "Features (eAudiobooks)": {},
      "Installation Issues - Patron (eAudiobooks)": {},
      "Media Manager (eAudiobooks)": {},
      "Streaming (eAudiobooks)": {},
      "Transfer (eAudiobooks)": {}
    },
    "Login (eAudiobooks)": {
      "Account Creation (eAudiobooks)": {},
      "Associated Library (eAudiobooks)": {},
      "Boopsie": {},
      "Deactivation (eAudiobooks)": {},
      "Email Change (eAudiobooks)": {},
      "Escalation (eAudiobooks)": {},
      "Forgotten Username (eAudiobooks)": {},
      "Forgotten Password (eAudiobooks)": {},
      "SIP2 Password Reset (eAudiobooks)": {},
      "Update Account Information (O)": {}
    },
    "Search (eAudiobooks)": {
      "No Record Found (eAudiobooks)": {}
    },
    "SSO (eAudiobooks)": {},
    "Title (eAudiobooks)": {
      "Audio (eAudiobooks)": {},
      "Content (eAudiobooks)": {},
      "Image (eAudiobooks)": {},
      "Meta Data (eAudiobooks)": {},
      "PDF Files": {}
    }
  },
  "eBooks": {
    "ADE Login (eBooks)": {
      "Account Creation (eBooks)": {},
      "Associated Library (eBooks)": {},
      "Escalation (eBooks)": {},
      "Password Reset (eBooks)": {}
    },
    "Functionality (eBooks)": {
      "Adobe Digital Editions (eBooks)": {},
      "Apps (eBooks)": {},
      "Checkout / Hold / Renew / Return (eBooks)": {},
      "Download (eBooks)": {},
      "Failure (eBooks)": {},
      "Features (eBooks)": {},
      "Installation Issues - Patron (eBooks)": {}
    },
    "Title (eBooks)": {
      "Content (eBooks)": {},
      "Image (eBooks)": {},
      "Meta Data (eBooks)": {}
    }
  },
  "eMagazines": {
    "Functionality (eMagazines)": {
      "Apps (eMagazines)": {},
      "Checkout / Remove (eMagazines)": {},
      "Failure (eMagazines)": {},
      "Features (eMagazines)": {},
      "Installation Issues (eMagazines)": {},
      "Streaming (eMagazines)": {},
      "Zinio Reader (eMagazines)": {}
    },
    "Login (eMagazines)": {
      "Account Creation (eMagazines)": {},
      "Associated Library (eMagazines)": {},
      "Deactivation (eMagazines)": {},
      "Email Change (eMagazines)": {},
      "Error In Email Address(eMagazines)": {},
      "Escalation (eMagazines)": {},
      "Forgotten Username (eMagazines)": {},
      "Password Reset (eMagazines)": {},
      "Update Account Information (Z)": {}
    },
    "SSO (eMags)": {},
    "Title (eMagazines)": {
      "Audio (eMagazines)": {},
      "Content (eMagazines)": {},
      "Image (eMagazines)": {},
      "Meta Data (eMagazines)": {}
    }
  },
  "Login": {
    "Account Creation (Login)": {
      "Audio/eBook Web": {},
      "Boopsie": {},
      "Invalid Library Card Number / Acccess Code (Login)": {},
      "Magazines Web": {}
    },
    "Associated Library (Login)": {},
    "Deactivation (Login)": {},
    "Forgotten Username (Login)": {},
    "GDPR (Login)": {},
    "Password Reset (Login)": {},
    "SIP2 (Login)": {},
    "Update Information (Login)": {}
  },
  "Media Manager": {
    "Feature (MM)": {},
    "Function (MM)": {
      "Install (MM)": {},
      "Transfer (MM)": {},
      "Wrong App - Magazines (MM)": {},
      "Wrong App - Other Services (MM)": {}
    },
    "Login (MM)": {
      "Account Creation (MM)": {},
      "Associated Library (MM)": {},
      "Forgotten Username (MM)": {},
      "Forgotten Password (MM)": {}
    }
  },
  "Miscellaneous - Status Defined": {},
  "Other Digital Products (Not on the Gateway)": {
    "ArtistWorks": {
      "Login (ArtistWorks)": {},
      "Product Support (ArtistWorks)": {}
    },
    "Atomic Training": {
      "Login (AtomicTraining)": {},
      "Product Support (AtomicTraining)": {}
    },
    "BenchPrep": {
      "Login (Bench Prep)": {},
      "Product Support (Bench Prep)": {}
    },
    "BroadwayHD": {},
    "ComicsPlus": {
      "Gateway Login (ComicsPlus)": {},
      "Product support (ComicsPlus)": {}
    },
    "ePrep": {
      "Login (ePrep)": {},
      "Product Support (ePrep)": {}
    },
    "FastPencil": {
      "Login (FastPencil)": {},
      "Product Support (FastPencil)": {}
    },
    "GymAmerica": {
      "Login (Gym America)": {},
      "Product support (Gym America)": {}
    },
    "Instantflix formerly Indieflix": {
      "Login (Instantflix)": {},
      "Product Support (Instantflix)": {}
    },
    "KidSpeak": {
      "Login (KidSpeak)": {}
    },
    "Kudda": {
      "Login (Kudda)": {},
      "Product Support (Kudda)": {}
    },
    "Law Depot": {
      "Login (Law Depot)": {},
      "Product Support (Law Depot)": {}
    },
    "OnePlay": {
      "Login (OnePlay)": {},
      "Product Support (OnePlay)": {}
    },
    "Pongalo": {},
    "Qello Concerts": {},
    "Transparent Language": {},
    "Universal Class": {
      "Login (Universal Class)": {},
      "Product support (Universal Class)": {}
    },
    "World Crunch": {
      "Login (World Crunch)": {},
      "Product Support (World Crunch)": {}
    }
  },
  "RBdigital App": {
    "Audio (RB App)": {
      "Title": {}
    },
    "eBook (RB App)": {
      "Title": {}
    },
    "eMagazine (RB App)": {
      "Title": {}
    },
    "Feature (RB App)": {},
    "Function (RB App)": {},
    "Install (RB App)": {},
    "Login (RB App)": {
      "Account Creation": {},
      "Associated Library": {},
      "Boopsie (RB App)": {},
      "Forgotten Username": {},
      "Password Reset": {},
      "SIP2 (RB App)": {},
      "Update Information": {}
    },
    "Search (RB App)": {}
  },
  "RBdigital Magazine Web": {
    "Admin (RB Mag Web)": {},
    "Feature (RB Mag Web)": {},
    "Function (RB Mag Web)": {},
    "Login (RB Mag Web)": {},
    "Magazine (RB Mag Web)": {
      "Title (RB Mag Web)": {}
    },
    "Search (RB Mag Web)": {},
    "URL Inquiry (RB Mag Web)": {}
  },
  "RBdigital Web (Gateway)": {
    "Acorn TV": {
      "Gateway Login (Acorn TV)": {},
      "Product Login (Acorn TV)": {}
    },
    "ArtistWorks": {
      "Gateway Login (ArtistWorks)": {}
    },
    "ComicsPlus": {
      "Gateway Login (ComicsPlus)": {}
    },
    "ePrep": {},
    "Hoonuit (formerly AtomicTraining)": {},
    "Indieflix (formerly InstantFlix)": {
      "Gateway Login (Indieflix)": {}
    },
    "KidSpeak": {},
    "LawDepot": {},
    "Magazines": {
      "Admin": {},
      "Login": {},
      "Search": {},
      "Title": {}
    },
    "OnePlay": {
      "Gateway Login (OnePlay)": {}
    },
    "Pongalo": {
      "Login (Pongalo)": {}
    },
    "Qello Concerts": {
      "Gateway Login (Qello Concerts)": {}
    },
    "Signing Savvy": {},
    "The Great Courses": {},
    "Transparent Language": {},
    "Universal Class": {}
  },
  "RBdigital Web (Previously OneClickdigital)": {
    "Admin (RB A/E Web)": {
      "Reports": {}
    },
    "Audio (RB A/E Web)": {
      "Admin": {},
      "Login": {},
      "Search": {},
      "Title": {}
    },
    "eBook (RB A/E Web)": {
      "Admin": {},
      "Login": {},
      "Search": {},
      "Title": {}
    },
    "Function (RB A/E Web)": {
      "Checkout / Hold / Renew / Recommend (RB A/E Web)": {}
    },
    "Login (RB A/E Web)": {
      "GDPR (RB A/E Web)": {}
    },
    "Search (RB A/E Web)": {},
    "URL Inquiry (RB A/E Web)": {}
  }
}

​

Answer 1

我们迭代初始对象并获取它的可枚举键。我们使用这些键作为我们创建的选项元素的值和文本内容。然后，我们向选择框中添加一个更改事件侦听器，该复选框在选择更改时状态，以获取当前对象上所选属性的值，并根据该值中的键创建一个新的复选框(如果存在的话)。

   let create = (tag, opts = {}) => Object.assign(document.createElement(tag), opts),
      appendChildren = (p, children) => children.forEach(c => p.appendChild(c)),
      createSelect = (obj) => {
        let s = create("select"),
          options = [];
        for (let value of Object.keys(obj)) {
          options.push(create("option", {
            value,
            textContent: value
          }))
        }
        appendChildren(s, options);
        s.addEventListener("change", () => {
          let sv = s.options[s.selectedIndex].value;
          (Object.keys(obj[sv]).length > 0) ? createSelect(obj[sv]): alert("no more selections to be made");
        });
        document.body.appendChild(s);
      }
    createSelect(json);

​

let json = {
  "Admin": {
    "Authentication (Admin)": {
      "SIP2 (Admin)": {}
    },
    "Enhancement (Admin)": {},
    "Login (Admin)": {
      "Password Reset(Admin)": {},
      "Permission (Admin)": {}
    },
    "MARC Records (Admin)": {},
    "Marketing Materials": {},
    "Reports (Admin)": {
      "Bug Report (Admin)": {},
      "Enhancement Request(Admin)": {}
    },
    "Sales Lead (Admin)": {},
    "Subscription / Purchased Title (Admin)": {}
  },
  "Combined Services App": {
    "Books (CSA)": {
      "Audiobooks (CSA)": {},
      "eBooks (CSA": {}
    },
    "Education (CSA)": {
      "Artistworks (CSA)": {},
      "Hoonuit (CSA)": {},
      "The Great Courses": {},
      "Transparent Language (CSA)": {}
    },
    "Games & Music (CSA)": {
      "Qello Concerts (CSA)": {}
    },
    "Magazines & Comics (CSA)": {
      "Comics (CSA)": {},
      "Magazines (CSA)": {}
    },
    "Video (CSA)": {
      "Acorn TV (CSA)": {},
      "BroadwayHD (CSA)": {},
      "Indieflix (CSA)": {},
      "Pongalo (CSA)": {}
    }
  },
  "Combined Services Website": {
    "Books (CSW)": {},
    "Education (CSW)": {
      "Langauge Learning (CSW)": {},
      "Music & Art Instruction (CSW)": {},
      "Software Training (CSW)": {},
      "The Great Courses (CSW)": {}
    },
    "Games & Music (CSW)": {},
    "Magazines & Comics (CSW)": {},
    "Video (CSW)": {
      "Acorn TV (CSW)": {},
      "Indieflix (CSW)": {},
      "Pongalo (CSW)": {},
      "Stingray Qello (CSW)": {},
      "The Great Courses (CSW)": {}
    }
  }
}

let create = (tag, opts = {}) => Object.assign(document.createElement(tag), opts),
  appendChildren = (p, children) => children.forEach(c => p.appendChild(c)),
  createSelect = (obj) => {
    let s = create("select"),
      options = [];
    for (let value of Object.keys(obj)) {
      options.push(create("option", {
        value,
        textContent: value
      }))
    }
    appendChildren(s, options);
    s.addEventListener("change", () => {
      let sv = s.options[s.selectedIndex].value;
      (Object.keys(obj[sv]).length > 0) ? createSelect(obj[sv]): alert("no more selections to be made");
    });
    document.body.appendChild(s);
  }
createSelect(json);

​

Answer 2

您的对象有三个级别，所以我会在HTML文档中为这三个级别放置三个下拉列表。然后创建将填充下一个下拉列表的单击处理程序，并在此之后清除任意选项：

​

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* const json = '{ "Admin": { "Authentication (Admin)": { "SIP2 (Admin)": {} }, "Enhancement (Admin)": {}, "Login (Admin)": { "Password Reset(Admin)": {}, "Permission (Admin)": {} }, "MARC Records (Admin)": {}, "Marketing Materials": {}, "Reports (Admin)": { "Bug Report (Admin)": {}, "Enhancement Request(Admin)": {} }, "Sales Lead (Admin)": {}, "Subscription / Purchased Title (Admin)": {} }, "Combined Services App": { "Books (CSA)": { "Audiobooks (CSA)": {}, "eBooks (CSA": {} }, "Education (CSA)": { "Artistworks (CSA)": {}, "Hoonuit (CSA)": {}, "The Great Courses": {}, "Transparent Language (CSA)": {} }, "Games & Music (CSA)": { "Qello Concerts (CSA)": {} }, "Magazines & Comics (CSA)": { "Comics (CSA)": {}, "Magazines (CSA)": {} }, "Video (CSA)": { "Acorn TV (CSA)": {}, "BroadwayHD (CSA)": {}, "Indieflix (CSA)": {}, "Pongalo (CSA)": {} } }, "Combined Services Website": { "Books (CSW)": {}, "Education (CSW)": { "Langauge Learning (CSW)": {}, "Music & Art Instruction (CSW)": {}, "Software Training (CSW)": {}, "The Great Courses (CSW)": {} }, "Games & Music (CSW)": {}, "Magazines & Comics (CSW)": {}, "Video (CSW)": { "Acorn TV (CSW)": {}, "Indieflix (CSW)": {}, "Pongalo (CSW)": {}, "Stingray Qello (CSW)": {}, "The Great Courses (CSW)": {} } }, "eAudiobooks": { "Functionality (eAudiobooks)": { "Apps (eAudiobooks)": {}, "Checkout / Hold / Renew / Return (eAudiobooks)": {}, "Download (eAudiobooks)": {}, "Failure (eAudiobooks)": {}, "Features (eAudiobooks)": {}, "Installation Issues - Patron (eAudiobooks)": {}, "Media Manager (eAudiobooks)": {}, "Streaming (eAudiobooks)": {}, "Transfer (eAudiobooks)": {} }, "Login (eAudiobooks)": { "Account Creation (eAudiobooks)": {}, "Associated Library (eAudiobooks)": {}, "Boopsie": {}, "Deactivation (eAudiobooks)": {}, "Email Change (eAudiobooks)": {}, "Escalation (eAudiobooks)": {}, "Forgotten Username (eAudiobooks)": {}, "Forgotten Password (eAudiobooks)": {}, "SIP2 Password Reset (eAudiobooks)": {}, "Update Account Information (O)": {} }, "Search (eAudiobooks)": { "No Record Found (eAudiobooks)": {} }, "SSO (eAudiobooks)": {}, "Title (eAudiobooks)": { "Audio (eAudiobooks)": {}, "Content (eAudiobooks)": {}, "Image (eAudiobooks)": {}, "Meta Data (eAudiobooks)": {}, "PDF Files": {} } }, "eBooks": { "ADE Login (eBooks)": { "Account Creation (eBooks)": {}, "Associated Library (eBooks)": {}, "Escalation (eBooks)": {}, "Password Reset (eBooks)": {} }, "Functionality (eBooks)": { "Adobe Digital Editions (eBooks)": {}, "Apps (eBooks)": {}, "Checkout / Hold / Renew / Return (eBooks)": {}, "Download (eBooks)": {}, "Failure (eBooks)": {}, "Features (eBooks)": {}, "Installation Issues - Patron (eBooks)": {} }, "Title (eBooks)": { "Content (eBooks)": {}, "Image (eBooks)": {}, "Meta Data (eBooks)": {} } }, "eMagazines": { "Functionality (eMagazines)": { "Apps (eMagazines)": {}, "Checkout / Remove (eMagazines)": {}, "Failure (eMagazines)": {}, "Features (eMagazines)": {}, "Installation Issues (eMagazines)": {}, "Streaming (eMagazines)": {}, "Zinio Reader (eMagazines)": {} }, "Login (eMagazines)": { "Account Creation (eMagazines)": {}, "Associated Library (eMagazines)": {}, "Deactivation (eMagazines)": {}, "Email Change (eMagazines)": {}, "Error In Email Address(eMagazines)": {}, "Escalation (eMagazines)": {}, "Forgotten Username (eMagazines)": {}, "Password Reset (eMagazines)": {}, "Update Account Information (Z)": {} }, "SSO (eMags)": {}, "Title (eMagazines)": { "Audio (eMagazines)": {}, "Content (eMagazines)": {}, "Image (eMagazines)": {}, "Meta Data (eMagazines)": {} } }, "Login": { "Account Creation (Login)": { "Audio/eBook Web": {}, "Boopsie": {}, "Invalid Library Card Number / Acccess Code (Login)": {}, "Magazines Web": {} }, "Associated Library (Login)": {}, "Deactivation (Login)": {}, "Forgotten Username (Login)": {}, "GDPR (Login)": {}, "Password Reset (Login)": {}, "SIP2 (Login)": {}, "Update Information (Login)": {} }, "Media Manager": { "Feature (MM)": {}, "Function (MM)": { "Install (MM)": {}, "Transfer (MM)": {}, "Wrong App - Magazines (MM)": {}, "Wrong App - Other Services (MM)": {} }, "Login (MM)": { "Account Creation (MM)": {}, "Associated Library (MM)": {}, "Forgotten Username (MM)": {}, "Forgotten Password (MM)": {} } }, "Miscellaneous - Status Defined": {}, "Other Digital Products (Not on the Gateway)": { "ArtistWorks": { "Login (ArtistWorks)": {}, "Product Support (ArtistWorks)": {} }, "Atomic Training": { "Login (AtomicTraining)": {}, "Product Support (AtomicTraining)": {} }, "BenchPrep": { "Login (Bench Prep)": {}, "Product Support (Bench Prep)": {} }, "BroadwayHD": {}, "ComicsPlus": { "Gateway Login (ComicsPlus)": {}, "Product support (ComicsPlus)": {} }, "ePrep": { "Login (ePrep)": {}, "Product Support (ePrep)": {} }, "FastPencil": { "Login (FastPencil)": {}, "Product Support (FastPencil)": {} }, "GymAmerica": { "Login (Gym America)": {}, "Product support (Gym America)": {} }, "Instantflix formerly Indieflix": { "Login (Instantflix)": {}, "Product Support (Instantflix)": {} }, "KidSpeak": { "Login (KidSpeak)": {} }, "Kudda": { "Login (Kudda)": {}, "Product Support (Kudda)": {} }, "Law Depot": { "Login (Law Depot)": {}, "Product Support (Law Depot)": {} }, "OnePlay": { "Login (OnePlay)": {}, "Product Support (OnePlay)": {} }, "Pongalo": {}, "Qello Concerts": {}, "Transparent Language": {}, "Universal Class": { "Login (Universal Class)": {}, "Product support (Universal Class)": {} }, "World Crunch": { "Login (World Crunch)": {}, "Product Support (World Crunch)": {} } }, "RBdigital App": { "Audio (RB App)": { "Title": {} }, "eBook (RB App)": { "Title": {} }, "eMagazine (RB App)": { "Title": {} }, "Feature (RB App)": {}, "Function (RB App)": {}, "Install (RB App)": {}, "Login (RB App)": { "Account Creation": {}, "Associated Library": {}, "Boopsie (RB App)": {}, "Forgotten Username": {}, "Password Reset": {}, "SIP2 (RB App)": {}, "Update Information": {} }, "Search (RB App)": {} }, "RBdigital Magazine Web": { "Admin (RB Mag Web)": {}, "Feature (RB Mag Web)": {}, "Function (RB Mag Web)": {}, "Login (RB Mag Web)": {}, "Magazine (RB Mag Web)": { "Title (RB Mag Web)": {} }, "Search (RB Mag Web)": {}, "URL Inquiry (RB Mag Web)": {} }, "RBdigital Web (Gateway)": { "Acorn TV": { "Gateway Login (Acorn TV)": {}, "Product Login (Acorn TV)": {} }, "ArtistWorks": { "Gateway Login (ArtistWorks)": {} }, "ComicsPlus": { "Gateway Login (ComicsPlus)": {} }, "ePrep": {}, "Hoonuit (formerly AtomicTraining)": {}, "Indieflix (formerly InstantFlix)": { "Gateway Login (Indieflix)": {} }, "KidSpeak": {}, "LawDepot": {}, "Magazines": { "Admin": {}, "Login": {}, "Search": {}, "Title": {} }, "OnePlay": { "Gateway Login (OnePlay)": {} }, "Pongalo": { "Login (Pongalo)": {} }, "Qello Concerts": { "Gateway Login (Qello Concerts)": {} }, "Signing Savvy": {}, "The Great Courses": {}, "Transparent Language": {}, "Universal Class": {} }, "RBdigital Web (Previously OneClickdigital)": { "Admin (RB A/E Web)": { "Reports": {} }, "Audio (RB A/E Web)": { "Admin": {}, "Login": {}, "Search": {}, "Title": {} }, "eBook (RB A/E Web)": { "Admin": {}, "Login": {}, "Search": {}, "Title": {} }, "Function (RB A/E Web)": { "Checkout / Hold / Renew / Recommend (RB A/E Web)": {} }, "Login (RB A/E Web)": { "GDPR (RB A/E Web)": {} }, "Search (RB A/E Web)": {}, "URL Inquiry (RB A/E Web)": {} }}'
*/
const obj = JSON.parse(json);

const selects = [...document.querySelectorAll("select.sel")];

function populateDropDown(obj, i) {
    selects[i].innerHTML = obj && Object.keys(obj).length ? "<option>(make a selection)</option>" : "";
    for (const key in obj) {
        const option = document.createElement("option");
        option.text = key;
        selects[i].add(option); 
    }
}

function makeSelection(e) {
    let sub = obj;
    const j = selects.indexOf(e.target)+1;
    selects.forEach((sel, i) => {
        if (i === j) populateDropDown(sub, i); 
        if (i > j) sel.innerHTML = "";
        sub = sub && sel.selectedIndex >= 0 && sub[sel.options[sel.selectedIndex].textContent];
    });
}

// Populate first drop-down:
populateDropDown(obj, 0);
// Bind selection handlers
for (const sel of selects) sel.addEventListener('change', makeSelection);

Level 1: <select class="sel"></select><br>
Level 2: <select class="sel"></select><br>
Level 3: <select class="sel"></select><br>

​