下拉框级联操作问题

最新推荐文章于 2024-05-22 14:40:24 发布

原创最新推荐文章于 2024-05-22 14:40:24 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#servlet #xmlhttprequest #action #import #exception #function

本文介绍了一个使用AJAX实现的下拉框联动示例，通过前端页面选择父栏目时，动态加载对应的子栏目到另一个下拉框中。示例提供了完整的HTML和servlet代码，展示了如何在用户更改父栏目选项时发送AJAX请求并更新子栏目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

action得到一个list，包括父栏目和子栏目，页面要显示两个下拉框，我通过什么方式将父栏目和子栏目的内容分别放在两个下拉框中呢？
------------------------------

答案：imA(男的不会，会的不男)提供答案

给你一个结合AJAX的例子（没有用struts，你可以把下面的servlet改成action）

前台页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <title>??</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script>
    var xmlHttp;
    function valueChange(val)
    {
    alert("hhelo");
    if(window.XMLHttpRequest)
    {
    xmlHttp=new XMLHttpRequest();
    }else if(window.ActiveXObject)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    if(!xmlHttp)
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
    }
    url="http://localhost:8080/ws/LDServlet?parent="+val;
    xmlHttp.onreadystatechange=function()
    {
    //alert("AAAAAAAAA");
    if(xmlHttp.readystate==4)
    {
    if(xmlHttp.status==200)
    {
    xmlDOM=xmlHttp.responseXML;
    root=xmlDOM.documentElement;
    htmlstr="<select>";
    alert(root.childNodes.length);
    while(root.hasChildNodes())
    {
    var child=root.firstChild;
    htmlstr+="<option value='"+child.getAttribute("id")+"'>"+child.getAttribute("value")+"</option>";
    root.removeChild(child);
    }
    htmlstr+="</select>";
    document.getElementById("child").innerHTML=htmlstr;
    }
    }
    };
    xmlHttp.open("POST",url,true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttp.send(null);
    }
    </script>
</head>

<body>
    <table>
    <tr><td>????
    <select onchange="valueChange(this.value)">
    <option value=""></option>
    <option value="hello">hello</option>
    <option value="else">else</option>
    <option value="whatever">else</option>
    </select>
    </td>
    <td>????
    <div id="child"></div>
    </td></tr>
    </table>
</body>
</html>
后台servlet：
package cn.forecast.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class for Servlet: LDServlet
*
*/
public class LDServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
public LDServlet() {
super();
}

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String parent=request.getParameter("parent");
System.out.println("parent: "+parent);
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);
response.setContentType("text/xml; charset=GB2312");
try
{
org.w3c.dom.Document document=javax.xml.parsers.DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
org.w3c.dom.Element root=document.createElement("root");
org.w3c.dom.Element child1=document.createElement("child1");
org.w3c.dom.Element child2=document.createElement("child2");
if(parent.equals("hello")){
child1.setAttribute("id","child1");
child1.setAttribute("value","孩子1");
child2.setAttribute("id","child2");
child2.setAttribute("value","孩子2");
}else if(parent.equals("else"))
{
child1.setAttribute("id","child1");
child1.setAttribute("value","辽宁");
child2.setAttribute("id","child2");
child2.setAttribute("value","吉林");
}else if(parent.equals("whatever"))
{
child1.setAttribute("id","child1");
child1.setAttribute("value","共和党");
child2.setAttribute("id","child2");
child2.setAttribute("value","民主党");
}
root.appendChild(child1);
root.appendChild(child2);
document.appendChild(root);
javax.xml.transform.dom.DOMSource doms=new javax.xml.transform.dom.DOMSource(document);
javax.xml.transform.stream.StreamResult sr=new javax.xml.transform.stream.StreamResult(response.getOutputStream());
javax.xml.transform.TransformerFactory tf=javax.xml.transform.TransformerFactory.newInstance();
javax.xml.transform.Transformer t=tf.newTransformer();
t.setOutputProperty("encoding","GB2312");
t.transform(doms,sr);
}catch(Exception e)
{
e.printStackTrace();
}
}
}