JS两个下拉框的交互

下面是一个例子，展示了如何使用JavaScript实现两个下拉框的交互：

HTML代码：

<select id="select1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="select2">
  <option value="a">选项A</option>
  <option value="b">选项B</option>
  <option value="c">选项C</option>
</select>

JavaScript代码：

var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");

select1.addEventListener("change", function() {
  // 获取选中的值
  var selectedValue = select1.value;

  // 根据选中的值，设置第二个下拉框的选项
  if (selectedValue === "1") {
    select2.innerHTML = `
      <option value="a">选项A</option>
      <option value="b">选项B</option>
      <<option value="c">选项C</option>
    `;
  } else if (selectedValue === "2") {
    select2.innerHTML = `
      <option value="x">选项X</option>
      <option value="y">选项Y</option>
      <option value="z">选项Z</option>
    `;
  } else {
    select2.innerHTML = `
      <option value="alpha">选项α</option>
      <option value="beta">选项β</option>
      <option value="gamma">选项γ</option>
    `;
  }
});

上面的代码中，我们使用了事件监听器来监听第一个下拉框的change事件。当第一个下拉框的选项改变时，我们获取选中的值，并根据这个值设置第二个下拉框的选项。在这个例子中，我们使用了三个不同的选项组合，但你可以根据自己的需要设置任何选项。