二级下拉菜单自动联动 一级变怎么清空？
编辑：自学文库
时间：2024年03月09日
一种实现方式是通过监听一级下拉菜单的变化事件，当一级下拉菜单的值发生改变时，使用JavaScript代码将二级下拉菜单的选项清空。
具体可以使用以下代码片段实现清空二级下拉菜单： ```javascript // 监听一级下拉菜单的变化 var firstLevelSelect = document.getElementById("first-level-select"); firstLevelSelect.addEventListener("change", function() { // 清空二级下拉菜单的选项 var secondLevelSelect = document.getElementById("second-level-select"); secondLevelSelect.innerHTML = ""; }); ``` 代码中，首先获取一级下拉菜单的DOM元素，并通过`addEventListener`函数监听其变化事件。
当一级下拉菜单的值发生改变时，回调函数会执行，其中通过`getElementById`函数获取二级下拉菜单的DOM元素，然后将其内部的HTML内容清空，即清空二级下拉菜单的选项。
通过以上代码实现，可以确保在一级下拉菜单发生变化时，二级下拉菜单会被清空。
这样当用户选择新的一级选项时，可以避免之前的二级选项对新一级选项的影响。