从第一个下拉列表的值中获取第二个下拉列表

<select id="list1">
  <option value="value1">选项1</option>
  <option value="value2">选项2</option>
  <option value="value3">选项3</option>
</select>

<select id="list2">
  <!-- 第二个下拉列表的选项将通过JavaScript动态生成 -->
</select>

document.getElementById('list1').addEventListener('change', function() {
  var selectedValue = this.value; // 获取第一个下拉列表的值

  // 根据第一个下拉列表的值生成第二个下拉列表的选项
  var list2Options = generateList2Options(selectedValue);

  // 更新第二个下拉列表的选项
  updateList2Options(list2Options);
});

function generateList2Options(selectedValue) {
  var options = [];

  if (selectedValue === 'value1') {
    options = [
      { value: 'value1-1', text: '选项1-1' },
      { value: 'value1-2', text: '选项1-2' },
      { value: 'value1-3', text: '选项1-3' }
    ];
  } else if (selectedValue === 'value2') {
    options = [
      { value: 'value2-1', text: '选项2-1' },
      { value: 'value2-2', text: '选项2-2' },
      { value: 'value2-3', text: '选项2-3' }
    ];
  } else if (selectedValue === 'value3') {
    options = [
      { value: 'value3-1', text: '选项3-1' },
      { value: 'value3-2', text: '选项3-2' },
      { value: 'value3-3', text: '选项3-3' }
    ];
  }

  return options;
}

function updateList2Options(options) {
  var list2 = document.getElementById('list2');
  list2.innerHTML = ''; // 清空原有选项

  // 遍历选项数组，生成新的选项
  options.forEach(function(option) {
    var optionElement = document.createElement('option');
    optionElement.value = option.value;
    optionElement.text = option.text;
    list2.appendChild(optionElement);
  });
}