jsp js实现新增框两个下拉选择联动

在JavaScript和JSP (Java Server Pages) 中实现两个下拉列表的选择联动，通常涉及到事件监听和数据绑定。以下是步骤概述：

1. **HTML部分**:

<select id="select1" onchange="updateSelect2()">
    <!-- 下拉列表选项 -->
</select>

<select id="select2" disabled>
    <!-- 默认显示第一个选项 -->
</select>

这里有两个`<select>`标签，分别代表联动的两个下拉列表。

2. **JSP部分**:
确保动态生成这两个下拉列表的内容。你可以使用JSP EL或JSTL (JavaServer Pages Standard Tag Library) 来渲染数据。

3. **JavaScript部分**:
创建一个函数 `updateSelect2()`，当第一个下拉列表(`select1`)发生变化时，更新第二个下拉列表(`select2`)的数据。

<script type="text/javascript">
function updateSelect2() {
    var select1 = document.getElementById("select1");
    var selectedValue1 = select1.options[select1.selectedIndex].value;

    // 从服务器获取与selectedValue1相关的第二级选项
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "getSecondLevelOptions.jsp?parentValue=" + selectedValue1);
    xhr.onload = function () {
        if (xhr.status === 200) {
            var secondSelect = document.getElementById("select2");
            secondSelect.innerHTML = xhr.responseText; // 更新第二级下拉列表
            secondSelect.disabled = false;
        }
    };
    xhr.send();
}
</script>

这段代码通过AJAX请求向服务器获取与第一级选择关联的第二级选项，并更新`select2`的选项。

4. **服务器端处理**:
在`getSecondLevelOptions.jsp`文件中，根据传入的参数查询数据库并返回包含第二级选项的HTML片段。