js二级联动菜单高亮

<select id="firstMenu">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

<select id="secondMenu">
  <option value="">请选择</option>
</select>

document.getElementById('firstMenu').addEventListener('change', function() {
  var selectedValue = this.value;
  var secondMenu = document.getElementById('secondMenu');
  secondMenu.innerHTML = '<option value="">请选择</option>'; // 清空第二个菜单

  if(selectedValue === 'option1') {
    secondMenu.innerHTML += '<option value="subOption1">子选项1</option><option value="subOption2">子选项2</option>';
  } else if(selectedValue === 'option2') {
    secondMenu.innerHTML += '<option value="subOption3">子选项3</option><option value="subOption4">子选项4</option>';
  }
});

// 高亮显示当前选中的菜单项
document.querySelectorAll('select').forEach(function(menu) {
  menu.addEventListener('change', function() {
    // 移除所有选项的高亮
    this.querySelectorAll('option').forEach(function(option) {
      option.classList.remove('highlight');
    });
    // 为当前选中的选项添加高亮
    this.querySelector('option:checked').classList.add('highlight');
  });
});

.highlight {
  background-color: yellow;
}