如何使用 JavaScript 实现一个简单的多级联动下拉菜单功能？

实现多级联动下拉菜单功能的 JavaScript 代码如下：

// HTML Markup
<select id="category">
  <option value="">--Please Select--</option>
</select>
<select id="subCategory">
  <option value="">--Please Select--</option>
</select>

// JavaScript Code
let category = document.querySelector('#category');
let subCategory = document.querySelector('#subCategory');

category.addEventListener('change', function() {
  let selectedOption = this.options[this.selectedIndex].value;
  if (selectedOption) {
    let subCategoryOptions = fetchSubCategoryOptions(selectedOption);
    populateSubCategory(subCategoryOptions);
  } else {
    // Clear the subCategory options
    subCategory.innerHTML = '';
  }
});

function fetchSubCategoryOptions(category) {
  // Fetch the subCategory options from a remote source or a local db
  return [
    {name: 'Option A', value: 'A'},
    {name: 'Option B', value: 'B'},
    {name: 'Option C', value: 'C'},
  ];
}

function populateSubCategory(options = []) {
  // Clear the subCategory options
  subCategory.innerHTML = '';
  // Repopulate the subCategory
  options.map(option => {
    let optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.textContent = option.name;
    subCategory.appendChild(optionElement);
  });
}