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"的选项。这样就实现了下拉框选择筛选数据的联动。