如何根据对另一个选择框的选择更改选择框的选项值

<select id="triggerSelect" onchange="changeOptions()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="targetSelect">
  <option value="targetOption1">Target Option 1</option>
  <option value="targetOption2">Target Option 2</option>
  <option value="targetOption3">Target Option 3</option>
</select>

function changeOptions() {
  var triggerSelect = document.getElementById("triggerSelect");
  var targetSelect = document.getElementById("targetSelect");

  // 获取触发选择框当前选择的值
  var selectedValue = triggerSelect.value;

  // 清空目标选择框的选项
  targetSelect.innerHTML = "";

  // 根据触发选择的值来改变目标选择框的选项值
  if (selectedValue === "option1") {
    targetSelect.add(new Option("Target Option A", "targetOptionA"));
    targetSelect.add(new Option("Target Option B", "targetOptionB"));
    targetSelect.add(new Option("Target Option C", "targetOptionC"));
  } else if (selectedValue === "option2") {
    targetSelect.add(new Option("Target Option X", "targetOptionX"));
    targetSelect.add(new Option("Target Option Y", "targetOptionY"));
  } else if (selectedValue === "option3") {
    targetSelect.add(new Option("Target Option P", "targetOptionP"));
    targetSelect.add(new Option("Target Option Q", "targetOptionQ"));
    targetSelect.add(new Option("Target Option R", "targetOptionR"));
    targetSelect.add(new Option("Target Option S", "targetOptionS"));
  }
}