下拉框级联操作问题

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 οnchange="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();
}
}        
}


你可以把这个servlet改造成action(因为action也是servlet)。

下拉框级联可以通过AJAX实现。具体实现步骤如下: 1. 在HTML页面中定义下拉框 ``` <select id="firstSelect" onchange="getSecondSelect()"> <option value="">请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> <select id="secondSelect"> <option value="">请选择</option> </select> ``` 2. 编写AJAX代码 ``` function getSecondSelect(){ var firstSelectValue = document.getElementById('firstSelect').value; var url = "getSecondSelect.php?firstSelectValue=" + firstSelectValue; //创建XMLHttpRequest对象 var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //发起AJAX请求 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('secondSelect').innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET", url, true); xmlhttp.send(); } ``` 3. 编写后台PHP代码 ``` $firstSelectValue = $_GET['firstSelectValue']; $sql = "SELECT * FROM second_select WHERE first_select_value = $firstSelectValue"; $result = mysql_query($sql); while ($row = mysql_fetch_array($result)) { echo "<option value='" . $row['second_select_value'] . "'>" . $row['second_select_name'] . "</option>"; } ``` 以上代码完成了下拉框级联,当第一个下拉框的选项改变,会发起AJAX请求,后台PHP代码会根据选项的值查询数据库,返回第二个下拉框的选项列表。前台JS代码会将返回的选项列表填充到第二个下拉框中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值