如何在下拉列表和父级列表中添加活动类

<select id="activity-dropdown">
  <option value="">请选择活动类别</option>
</select>

<ul id="parent-list">
  <li>父级列表项1</li>
  <li>父级列表项2</li>
  <li>父级列表项3</li>
</ul>

// 获取下拉列表和父级列表的元素
const dropdown = document.getElementById('activity-dropdown');
const parentList = document.getElementById('parent-list');

// 添加事件监听器
dropdown.addEventListener('change', handleDropdownChange);
parentList.addEventListener('click', handleParentListClick);

function handleDropdownChange() {
  // 获取选中的活动类别
  const selectedOption = dropdown.options[dropdown.selectedIndex].value;

  // 根据选中的活动类别添加相应的活动类别选项
  if (selectedOption === '1') {
    // 清空下拉列表中的选项
    dropdown.innerHTML = '';

    // 创建并添加活动类别选项
    const option1 = document.createElement('option');
    option1.value = '活动类别1';
    option1.textContent = '活动类别1';
    dropdown.appendChild(option1);

    const option2 = document.createElement('option');
    option2.value = '活动类别2';
    option2.textContent = '活动类别2';
    dropdown.appendChild(option2);

    // 添加默认选项
    const defaultOption = document.createElement('option');
    defaultOption.value = '';
    defaultOption.textContent = '请选择活动类别';
    dropdown.prepend(defaultOption);
  } else if (selectedOption === '2') {
    // 添加其他活动类别的选项...
  }
}

function handleParentListClick(event) {
  // 获取点击的父级列表项
  const clickedItem = event.target;

  // 根据点击的父级列表项添加相应的活动类别子项
  if (clickedItem.textContent === '父级列表项1') {
    // 清空父级列表中的子项
    parentList.innerHTML = '';

    // 创建并添加活动类别子项
    const listItem1 = document.createElement('li');
    listItem1.textContent = '活动类别子项1';
    parentList.appendChild(listItem1);

    const listItem2 = document.createElement('li');
    listItem2.textContent = '活动类别子项2';
    parentList.appendChild(listItem2);

    // 添加其他活动类别子项...
  } else if (clickedItem.textContent === '父级列表项2') {
    // 添加其他活动类别的子项...
  }
}