Javascript 不重新加载jsp页面的从属选择列表

这是我在jsp中为依赖选择列表编写的代码。它工作正常，但会重新加载页面以获取第二个选择列表中的值。我想在不重新加载jsp的情况下执行同样的操作。 请建议

Javascript:

function change(){
var cid=document.getElementById("series_id").selectedIndex;
var val = document.getElementById("series_id").options[cid].text;
window.location.replace("HomePage_new.jsp?id="+val);
}

jsp:

系列
选择
图纸编号

已解决：

从中获得解决方案：

---

回答问题时，我们没有评论的声誉

您是否知道在页面上使用JSP“inline”的方法现在被认为是不好的做法（自从2003年发布JSP2.0以来，它一直被认为是不好的做法）

请参阅最新的Java EE JSP教程：

将业务逻辑（填充列表的内容）移动到后端servlet

然后，您将能够显示列表，而无需刷新

 <!-- Series  --> 
<tr>
<td class="password">Series</td>
<td class="password"> 
<select id="series_id" name="series_id" onChange="change()" style="color: #4B616A; background-color: #eaeced; border: 1px solid #939fa4; height: 26px; width: 120px; padding-bottom: 4px; text-align: center;">
<option value="">Select</option>
<% 

while (rs.next())
{
    System.out.println("Series loop" + rs.getString(1));


%>
    <option value=""><% rs.getString(1); %><%= rs.getString(1) %></option>
        <%

         System.out.println("Series loop" + rs.getString(1));

    }

 %>
    </select></td>
</tr>

<!-- Drawing number  -->
    <tr>
        <td class="password">Drawing Number</td>
        <td class="password"><select id="dr_no_id" name="dr_no_id"
            style="color: #4B616A; background-color: #eaeced; border: 1px solid #939fa4; height: 26px; width: 120px; padding-bottom: 4px; text-align: center;">
            <%
            rs1 = stmt.executeQuery("select DISTINCT Drawing_No from series_details where Series='"+ request.getParameter("id") + "'");
            while (rs1.next()) 
            {
            application.setAttribute("Drawing No",rs1.getString(1));
            %>
            <option value="1"><% rs1.getString("Drawing_No");%><%= rs1.getString("Drawing_No") %></option>
            <%

            }

            %>
        </select></td>
    </tr>