SOURCE

document.addEventListener('DOMContentLoaded', function() {
  const firstLevelSelect = document.getElementById('firstLevel');
  const secondLevelContainer = document.getElementById('secondLevelContainer');
  const textInput = document.getElementById('textInput');
  const submitBtn = document.getElementById('submitBtn');

  // 假设这是第一级菜单的数据
  const firstLevelOptions = [
    { label: '选项一', value: 'option1' },
    { label: '选项二', value: 'option2' },
    { label: '选项三', 'value': 'option3' }
  ];

  // 添加第一级菜单选项
  firstLevelOptions.forEach(option => {
    const opt = document.createElement('option');
    opt.value = option.value;
    opt.textContent = option.label;
    firstLevelSelect.appendChild(opt);
  });

  // 当第一级菜单选项改变时触发
  firstLevelSelect.addEventListener('change', function() {
    const selectedOption = this.value;
    if (selectedOption) {
      fetchSecondLevelOptions(selectedOption);
    } else {
      secondLevelContainer.innerHTML = '';
      secondLevelContainer.style.display = 'none';
    }
  });

  // 模拟从后端获取第二级菜单的函数
  function fetchSecondLevelOptions(firstLevelValue) {
    // 这里通常会发送AJAX请求到服务器
    // 下面是模拟数据
    const secondLevelOptions = [
      { label: '子选项1', value: 'subOption1' },
      { label: '子选项2', value: 'subOption2' }
    ];

    secondLevelContainer.innerHTML = '';
    secondLevelOptions.forEach(option => {
      const li = document.createElement('li');
      li.style.cursor = 'pointer';
      li.textContent = option.label;
      li.dataset.value = option.value;
      li.addEventListener('click', function() {
        this.classList.toggle('selected');
      });
      secondLevelContainer.appendChild(li);
    });

    secondLevelContainer.style.display = 'block';
  }

  // 提交按钮的点击事件
  submitBtn.addEventListener('click', function() {
    const formData = {
      firstLevel: firstLevelSelect.value,
      secondLevel: secondLevelContainer.querySelector('.selected')?.dataset.value,
      textInput: textInput.value
    };
    console.log(formData);
  });
});

<form id="myForm">
  <div style="position: relative; display: inline-block;">
    <select id="firstLevel" style="width: 200px; height: 30px;">
      <option value="">请选择一级菜单</option>
      <!-- 第一级菜单项将会在这里动态生成 -->
    </select>
    <div id="secondLevelContainer" style="position: absolute; top: 32px; left: 0; width: 200px; border: 1px solid #ccc; display: none;">
      <!-- 第二级菜单项将会在这里动态生成 -->
    </div>
  </div>
  <input type="text" id="textInput" placeholder="请输入内容" style="margin-left: 10px; width: 200px; height: 30px;">
  <button type="button" id="submitBtn" style="margin-left: 10px;">提交</button>
</form>