刷新更改时的下拉菜单javascript

// HTML代码
<select id="select1" onchange="refreshOptions()">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

<select id="select2"></select>

// JavaScript代码
function refreshOptions() {
  var select1 = document.getElementById("select1");
  var select2 = document.getElementById("select2");
  
  // 根据选中的选项值获取对应的选项列表，这里可以使用Ajax请求后端接口来获取数据
  
  // 模拟获取选项列表
  var options = getOptions(select1.value);
  
  // 清空下拉菜单的选项
  select2.innerHTML = "";
  
  // 添加新的选项
  for (var i = 0; i < options.length; i++) {
    var option = document.createElement("option");
    option.value = options[i].value;
    option.text = options[i].text;
    select2.appendChild(option);
  }
}

// 模拟获取选项列表的函数，根据select1的选项值返回对应的选项列表
function getOptions(value) {
  // 根据不同的选项值返回不同的选项列表
  if (value === "option1") {
    return [
      { value: "suboption1", text: "子选项1" },
      { value: "suboption2", text: "子选项2" }
    ];
  } else if (value === "option2") {
    return [
      { value: "suboption3", text: "子选项3" },
      { value: "suboption4", text: "子选项4" }
    ];
  } else {
    return [];
  }
}