js下拉框选择筛选数据数据联动

在JavaScript中，可以通过事件监听和DOM操作来实现下拉框选择筛选数据的联动。

首先，在HTML中创建两个下拉框，分别为"select1"和"select2"：

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

<select id="select2">
  <option value="suboption1">Suboption 1</option>
  <option value="suboption2">Suboption 2</option>
  <option value="suboption3">Suboption 3</option>
</select>

然后，在JavaScript中获取下拉框元素，并为"select1"添加change事件监听：

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

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

  // 根据select1的选中值筛选select2的选项
  if (selectedValue === "option1") {
    select2.innerHTML = `
      <option value="suboption1">Suboption 1</option>
      <option value="suboption2">Suboption 2</option>
    `;
  } else if (selectedValue === "option2") {
    select2.innerHTML = `
      <option value="suboption3">Suboption 3</option>
      <option value="suboption4">Suboption 4</option>
    `;
  } else if (selectedValue === "option3") {
    select2.innerHTML = `
      <option value="suboption5">Suboption 5</option>
      <option value="suboption6">Suboption 6</option>
    `;
  }
});

在change事件监听中，根据"select1"选中的值，通过修改"select2"的innerHTML来改变"select2"的选项。这样就实现了下拉框选择筛选数据的联动。