选中选项组中的不同选项时更改列表框的源

<select id="optionGroup">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="listBox">
  <option value="default">Please select an option</option>
</select>

var optionGroup = document.getElementById("optionGroup");
var listBox = document.getElementById("listBox");

optionGroup.addEventListener("change", function() {
  // 在这里编写根据选项组选项改变列表框的源的逻辑
});

optionGroup.addEventListener("change", function() {
  var selectedOption = optionGroup.value;

  if (selectedOption === "option1") {
    // 更改列表框的源为选项1对应的数据
    listBox.innerHTML = "<option value='data1'>Data 1</option>";
  } else if (selectedOption === "option2") {
    // 更改列表框的源为选项2对应的数据
    listBox.innerHTML = "<option value='data2'>Data 2</option>";
  } else if (selectedOption === "option3") {
    // 更改列表框的源为选项3对应的数据
    listBox.innerHTML = "<option value='data3'>Data 3</option>";
  }
});