注册 登录
编程论坛 jQuery论坛

checkbox动态级联问题

zfxheb123 发布于 2011-04-13 10:11, 1479 次点击
jsp页面-------------------
<html>
    <head>
        <script type="text/javascript" src="js/json2.js"></script>
        <script type="text/javascript" src="js/types.js" ></script>
    </head>
    <body>
        <form action="softbrandtype.jsp">
            品牌:
            <c:forEach var="brand" items="${list}">
                <input type="checkbox" name="b" value="${brand.id}"
                    onclick="getTypesById(this.value)">${brand.name}</input>
            </c:forEach>
            <br>
            <div id="divid"></div>
            操作系统:
            <input type="checkbox" name="s">
            Android
            </input>
            <input type="checkbox" name="s">
            Symbian
            </input>
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>
-------------------------types.js....代码
var xmlHttp;
function createXMLHttpRequest(){
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function getTypesById(value){
    createXMLHttpRequest();
    var url = "servlet/FindTypesServlet";
    xmlHttp.open("post",url,true);
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    alter("=========");
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState==4 && xmlHttp.status==200){
            response.setContentType("text/xml")
            var text = xmlHttp.responseText; //字符串 [xml文档的内容]
            var doc = xmlHttp.responseXML; //object js对象
            var types = doc.getElementsByTagName("types");
            var innerHTML = "<table width=500 border=1><tr><td>ID</td><td>机型</td><td>Pid</td><td>Pic</td></tr>";
            for(var i=0;i<types.length;i++){
                var t = types.item(i);
                var id = t.getAttribute("id");
                var name = t.getElementsByTagName("name")[0].firstChild.nodeValue;
                var pid = pid.getElementsByTagName("pid")[0].firstChild.nodeValue;
                var pic = student.getElementsByTagName("pic")[0].firstChild.nodeValue;
                innerHTML += "<tr><td>"+id+"</td><td>"+name+"</td><td>"+pid+"</td><td>"+pic+"</td>";
            }
            innerHTML += "</table>";
            document.getElementById("divid").innerHTML = innerHTML;
        }
    };
    xmlHttp.send("value="+value);
}
----------------Servlet代码

        response.setContentType("text/xml");
        PrintWriter out = response.getWriter();
        String[] str  = request.getParameterValues("value");
        BrandTypesDao dao = new BrandTypesDao();
        for(int i=0;i<str.length;i++){
            int id = Integer.parseInt(str[i]);
            List<Types> list = dao.selectTypesByPid(id);
            Document doc = DocumentHelper.createDocument();
            Element root = doc.addElement("list");
            for(Types t:list){
                Element types = root.addElement("types");
                types.addAttribute("id",t.getId()+"");
                Element name = types.addElement("name");
                name.setText(t.getName());
                Element pid = types.addElement("pid");
                types.setText(t.getPid()+"");
                Element pic = types.addElement("pic");
                types.setText(t.getPic());
            }
            
            out.print(doc.asXML());  //String text xml
            out.flush();
            out.close();

那位高手可以帮小妹看看





2 回复
#2
zfxheb1232011-04-13 10:13
等待中 做了好长时间效果老是出不来了
#3
天上的星星2011-06-18 12:07
小弟自己做了一个,挺简单,代码挺少,感觉非常好用,源码给你,好用的话顶一下!
只有本站会员才能查看附件,请 登录
程序代码:
下边是核心代码
function city(str)
{
var xmlhttp;
//document.getElementById("province").removeChild("option");
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
     
    {
    var obj=document.getElementById("city");
    obj.options.length=1;
    var strings=xmlhttp.responseText;
    one=strings.split("|");
    two=one[0].split(",");
    three=one[1].split(",");
    document.getElementById("test").value=str;
    //strs=document.getElementById("province").value;
   
    var select1=document.getElementById("city");
   
    for(var i=1;i<two.length;i++){
        var opt=new Option(two[i],three[i]);
        select1.options.add(opt,i+1);

    }
    }
  }
var keys=document.getElementById("province").value;
xmlhttp.open("GET","content.asp?keys="+str,true);
xmlhttp.send();
document.getElementById("test1").value=document.getElementById("province").value;
}
function myvalue(){
document.getElementById("test2").value=document.getElementById("city").value;   
}
1