JavaScript 实现两个下拉框交互 - 代码示例和解释

本文将详细介绍如何使用 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 事件。当第一个下拉框的选项改变时，我们获取选中的值，并根据这个值设置第二个下拉框的选项。在这个例子中，我们使用了三个不同的选项组合，但你可以根据自己的需要设置任何选项。