如何创建基于下拉选择的动态复选框选项？

<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<div id="checkbox-container"></div>

// 获取下拉选择框和复选框容器的引用
const dropdown = document.getElementById('dropdown');
const checkboxContainer = document.getElementById('checkbox-container');

// 监听下拉选择框的变化事件
dropdown.addEventListener('change', function() {
  // 清空复选框容器
  checkboxContainer.innerHTML = '';

  // 获取选择的值
  const selectedValue = dropdown.value;

  // 根据选择的值生成对应的复选框选项
  if (selectedValue === 'option1') {
    createCheckbox('选项1-1');
    createCheckbox('选项1-2');
    createCheckbox('选项1-3');
  } else if (selectedValue === 'option2') {
    createCheckbox('选项2-1');
    createCheckbox('选项2-2');
  } else if (selectedValue === 'option3') {
    createCheckbox('选项3-1');
    createCheckbox('选项3-2');
    createCheckbox('选项3-3');
    createCheckbox('选项3-4');
  }
});

// 动态生成复选框选项的函数
function createCheckbox(label) {
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.value = label;

  const checkboxLabel = document.createElement('label');
  checkboxLabel.textContent = label;

  checkboxContainer.appendChild(checkbox);
  checkboxContainer.appendChild(checkboxLabel);
}