在下拉列表1中选中值时如何更改下拉列表框的内容

在下拉列表1中选中值时，可以通过以下几种方式来更改下拉列表框的内容：

使用JavaScript：通过监听下拉列表1的onchange事件，在事件触发时，根据选中的值动态修改下拉列表框的内容。可以通过innerHTML属性来修改下拉列表框的选项，或者通过appendChild()和removeChild()方法来添加和删除选项。

示例代码：

// HTML
<select id="dropdown1" onchange="changeDropdown2()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

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

// JavaScript
function changeDropdown2() {
  var dropdown1 = document.getElementById("dropdown1");
  var dropdown2 = document.getElementById("dropdown2");
  
  // 根据选中的值修改下拉列表框的内容
  if (dropdown1.value === "option1") {
    dropdown2.innerHTML = `
      <option value="option4">Option 4</option>
      <option value="option5">Option 5</option>
      <option value="option6">Option 6</option>
    `;
  } else if (dropdown1.value === "option2") {
    dropdown2.innerHTML = `
      <option value="option7">Option 7</option>
      <option value="option8">Option 8</option>
      <option value="option9">Option 9</option>
    `;
  } else if (dropdown1.value === "option3") {
    dropdown2.innerHTML = `
      <option value="option10">Option 10</option>
      <option value="option11">Option 11</option>
      <option value="option12">Option 12</option>
    `;
  }
}

使用Ajax请求：通过Ajax请求从服务器获取下拉列表框的内容。在下拉列表1的onchange事件中，根据选中的值发送Ajax请求，服务器返回对应的下拉列表框内容，然后更新下拉列表框。

示例代码：

// HTML
<select id="dropdown1" onchange="changeDropdown2()">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

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

// JavaScript
function changeDropdown2() {
  var dropdown1 = document.getElementById("dropdown1");
  var dropdown2 = document.getElementById("dropdown2");
  
  // 发送Ajax请求
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 根据返回的内容更新下拉列表框
      dropdown2.innerHTML = xhr.responseText;
    }
  };
  
  // 根据选中的值构造请求URL
  var selectedValue = dropdown1.value;
  var url = "getDropdown2Options.php?selectedValue=" + selectedValue;
  
  // 发送GET请求
  xhr.open("GET", url, true);
  xhr.send();
}

以上是两种常见的方式来实现在下拉列表1中选中值时更改下拉列表框的内容。具体选择哪种方式取决于实际需求和开发环境。