`

Ajax实现三级联动下拉框

    博客分类:
  • java
阅读更多
基于网友的要求,我贴出在项目中用到的三级联动的代码:

jsp的代码:
<%@ page contentType = "text/html; charset=GBK"  import="java.util.*,com.wehave.hyerp.procurement.domain.Cgsqd"%>
<%@ taglib uri="struts-html" prefix="html" %>
<%@ taglib uri="struts-logic" prefix="logic" %>
<%@ taglib uri="struts-bean" prefix="bean" %>
<html>
    <head>
        <title> </title>
        <link rel = "stylesheet" type = "text/css" href = "../css/olstyle.css">    
        <SCRIPT type="text/javascript">
        var req;
        window.onload=function(){
        }
        
        function Change_Select()
        {
            var zhi=document.getElementById('m_gykfwzlbb_lbbm').value;
            var url="sqdSelect.go?method=getSkill&id="+zhi;
            if(zhi=="0"){
                alert("请选择您要察看的信息");
                   return;
            }else{
                if(window.XMLHttpRequest)
                {
                    req=new XMLHttpRequest();
                }else if(window.ActiveXObject)
                {
                    req=new ActiveXObject("Microsoft.XMLHTTP");
                }
                
                if(req)
                {
                    req.open("GET",url,true);
                    req.onreadystatechange=callback;
                    req.send(null);
                }
            }
        }
        
        function Change_Select2()
        {
            var zhi=document.getElementById('m_lbbm_se').value;
            //alert(zhi.substring(0,2));
            if(zhi=="0"){
                alert("请选择您要察看的信息");
                   return;
               }
            if(zhi.substring(0,2)=="WY"){
                var url="sqdSelect.go?method=getSkill2&id="+zhi;
                if(window.XMLHttpRequest)
                {
                    req=new XMLHttpRequest();
                }else if(window.ActiveXObject)
                {
                    req=new ActiveXObject("Microsoft.XMLHTTP");
                }
                
                if(req)
                {
                    req.open("GET",url,true);
                    req.onreadystatechange=callback2;
                    req.send(null);
                }
            }else{
                parent.topFram.location ="sqdSelectAll.go?method=getlistAll&id="+zhi;
            }
        }
        
        function Change_Select3()
        {
            var zhi=document.getElementById('m_lbbm_th').value;
            //alert(zhi.substring(0,2));
            if(zhi=="0"){
                alert("请选择您要察看的信息");
                   return;
               }else{
                parent.topFram.location ="sqdSelectAll.go?method=getlistAll2&id="+zhi;
            }
        }
        
        function callback()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        
        function callback2()
        {
            if(req.readyState == 4)
            {
                if(req.status == 200)
                {
                    parseMessage2();
                }else{
                    alert("Not able to retrieve description"+req.statusText);
                }
            }
        }
        
        function parseMessage()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('m_lbbm_se');
            select_root.options.length=0;
            
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
        }
        
        function parseMessage2()
        {
            var xmlDoc=req.responseXML.documentElement;
            var xSel=xmlDoc.getElementsByTagName('select');
            var select_root=document.getElementById('m_lbbm_th');
            select_root.options.length=0;
            
            for(var i=0;i<xSel.length;i++)
            {
                var xValue=xSel[i].childNodes[0].firstChild.nodeValue;
                var xText=xSel[i].childNodes[1].firstChild.nodeValue;
                var option=new Option(xText,xValue);
                try{
                    select_root.add(option);
                }catch(e){
                }
            }
        }
        
        
        
    </SCRIPT>
    </head>

<body bgcolor = "#C8D0D4">
    <html:form action="/cgsqdNewAction.go"> 
    <TABLE class = "cbToolbar" id = "idToolbar" cellpadding = '0' cellspacing = '0'>
        <TR align = "left" valign = "top" >
            <TD  NOWRAP>&nbsp;物质类别:&nbsp;&nbsp;
                <html:select property="m_gykfwzlbb_lbbm" onchange="Change_Select()">
                    <html:option value="0">请选择</html:option>
                       <html:options collection="LbfList" property="m_gykfwzlbb_lbbm" labelProperty="m_gykfwzlbb_lbmc"/>
                </html:select> &nbsp;
                <html:select property="m_lbbm_se" styleId="m_lbbm_se" onchange="Change_Select2()">
                    <html:option value="0">&nbsp;&nbsp;&nbsp;</html:option>
                </html:select>
                <html:select property="m_lbbm_th" styleId="m_lbbm_th" onchange="Change_Select3()">
                    <html:option value="0">&nbsp;&nbsp;&nbsp;</html:option>
                </html:select>
                
            </TD>
            
        </tr>
    </table>
     </html:form>
</body>
</html>
/**
     * 
     * 查询物质编码类别列表操作(一级)
     * */
    public ActionForward doSelectWzlb(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res) {
        HttpSession session = req.getSession();
        UserSession userSession =
            (UserSession) session.getAttribute("userSession");
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName("m_cgsqd");
        permission.setActionStr("'m_select'");
        if(permissionService.checkUserPermission(permission)){
            int updateSign=0;
            try{
                cgsqdService.updateCgsqwzhzb_sqsl();
                updateSign=1;
            }catch(Exception e){
                e.printStackTrace();
                updateSign=0;
            }
            if(updateSign==1){
                List LbfList=cgsqdService.treeListWzlb2();
                req.setAttribute("LbfList",LbfList);
                return mapping.findForward("tools");
            }else{
                return null;
            }
        }else{
            return mapping.findForward("failure");
        }
    }
    
    /** *//**
     * 
     * 查询物质编码类别列表操作(二级)
     * */
    public ActionForward doSelectWzlb1(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res) {
        HttpSession session = req.getSession();
        UserSession userSession =
            (UserSession) session.getAttribute("userSession");
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName("m_cgsqd");
        permission.setActionStr("'m_select'");
        if(permissionService.checkUserPermission(permission)){
            int updateSign=0;
            try{
                cgsqdService.updateCgsqwzhzb_sqsl();
                updateSign=1;
            }catch(Exception e){
                e.printStackTrace();
                updateSign=0;
            }
            if(updateSign==1){
                List LbfList=cgsqdService.treeListWzlb2();
                req.setAttribute("LbfList",LbfList);
                return mapping.findForward("tools1");
            }else{
                return null;
            }
        }else{
            return mapping.findForward("failure");
        }
    }
    
    /** *//**
     * 
     * 查询物质编码类别列表操作(三级)
     * */
    public ActionForward getSkill(
            ActionMapping mapping,
            ActionForm form,
            HttpServletRequest req,
            HttpServletResponse res) {
        HttpSession session = req.getSession();
        UserSession userSession =
            (UserSession) session.getAttribute("userSession");
        permission.setUserID(userSession.getUserId());
        permission.setUserName(userSession.getUserName());
        permission.setModuleName("m_cgsqd");
        permission.setActionStr("'m_select'");
        if(permissionService.checkUserPermission(permission)){
            String id=req.getParameter("id");
            
            res.setContentType("text/xml;charset=GBK");
            res.setHeader("Cache-Control","no-cache");
            String xml_start="<?xml version=\"1.0\" encoding=\"GBK\"?>";
            xml_start+="<selects>";
            String xml_end="</selects>";
            String xml="<select><value>0</value><text>请选择</text></select>";
            String m_lbbm_se="";
            String m_lbmc_se="";
            List LbfList=null;
            if(id.equals("WY")){
                LbfList=cgsqdService.treeListWzlb3_2(id);
            }else{
                LbfList=cgsqdService.treeListWzlb3_1(id);    
            }
            Iterator it=LbfList.iterator();
            while(it.hasNext()){
                Cgsqd cgsqd=(Cgsqd)it.next();
                m_lbbm_se=cgsqd.getM_gykfwzlbb_lbbm();
                m_lbmc_se=cgsqd.getM_gykfwzlbb_lbmc();
                xml +="<select><value>"+m_lbbm_se+"</value><text>"+m_lbmc_se+"</text></select>";
            }
            String last_xml=xml_start+xml+xml_end;
            logger.debug("XML是:"+last_xml);
            try {
                res.getWriter().write(last_xml);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }else{
            return null;
        }
    }

主要代码就这些,去掉一些权限大代码,真正的代码并不多。
分享到:
评论

相关推荐

    asp二级联动下拉框,三级联动下拉框

    ASP(Active Server Pages...综上所述,ASP二级和三级联动下拉框的实现涉及前端HTML、JavaScript/AJAX,后端ASP处理逻辑,以及数据库操作。这种功能在很多Web应用中都有广泛应用,为用户提供更直观、更高效的交互体验。

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    综上所述,实现“jQuery各种插件和JQuery Ajax三级联动地区下拉框”涉及到jQuery库、插件开发、AJAX交互、DOM操作和性能优化等多个方面。这个功能不仅实用,而且对于学习和理解JavaScript和jQuery的深入使用非常有...

    AJAX版省市区三级联动下拉框

    - "AJAXTest2.rar":这是一个RAR压缩文件,可能包含了一个完整的AJAX三级联动下拉框的示例代码,包括HTML、CSS、JavaScript和可能的服务器端脚本。 - "使用说明.txt":这是关于如何使用上述资源的指南,可能包含了...

    三级联动 下拉框

    在网页设计和开发中,"三级联动下拉框"是一种常见的交互元素,它通常用于实现多级关联选择,比如省份-城市-区县的选择。这种功能可以极大地提高用户体验,尤其是在处理大量分类信息时。下面我们将深入探讨这个话题,...

    Ajax实现二级/三级联动下拉框---servlet版

    在Web开发中,二级或三级联动下拉框是一种常见的交互设计,主要用于展示层次关系的数据,如省份-城市-区县的区域选择。本教程将详细讲解如何使用Ajax和Servlet技术来实现这一功能。 首先,我们需要了解Ajax...

    json实现三级联动下拉框---struts版(数据来自mysql数据库)

    在本项目中,"json实现三级联动下拉框---struts版(数据来自mysql数据库)"是利用JSON来处理省市县三级联动效果的示例,它通过Struts框架与MySQL数据库进行交互,动态地从数据库获取数据并更新到前端页面的下拉框中...

    Ajax 无限级 联动下拉框

    本文将深入探讨如何利用Ajax实现无限级联动下拉框的功能。 一、Ajax基础概念 Ajax的核心是通过JavaScript创建XMLHttpRequest对象,它允许在后台与服务器进行异步数据交换。JavaScript调用XMLHttpRequest对象的open...

    Ajax实现下拉框三级联动

    **Ajax实现下拉框三级联动**是Web开发中一种常见的交互设计,主要用于提高用户体验,让用户在选择一项数据时,能够即时地看到与之关联的下级数据,而无需等待整个页面重新加载。这种技术通常应用于地址选择、产品...

    mvc3二级联动下拉框

    5. Ajax:ASP.NET MVC支持Ajax操作,使用Ajax.BeginForm或jQuery的$.ajax方法,可以实现无刷新更新页面部分内容,这对于二级联动下拉框的实时更新至关重要。 6. 数据绑定:在ASP.NET MVC中,可以使用MVVM(Model-...

    php 三级联动下拉框

    在网页设计中,三级联动下拉框是一种常见的交互元素,特别是在数据层级结构比较复杂的场景下,如地区选择、产品分类等。它通过三个下拉菜单的级联关系,让用户能够逐步细化选择,从大类到小类,最终精确地选取目标...

    这里是基于layui开发的省市区三级联动下拉框.zip

    本项目是基于layui框架实现的省市区三级联动下拉框,这是一个常见的前端表单元素,常用于地址选择或定位功能。layui是一款轻量级的前端组件库,它提供了丰富的UI组件,易于使用且性能优异,特别适合快速构建中大型...

    layui-省市县三级联动下拉框效果.rar

    本示例中的压缩包文件"layui-省市县三级联动下拉框效果.rar"正是提供了这样一个功能的实现代码。 首先,我们来理解什么是“联动下拉框”。联动下拉框是指在多个下拉菜单之间存在依赖关系,当用户在一个下拉框中选择...

    Ajax实现的三级联动下拉菜单

    struts2+jsp+json+javascript实现的三级下拉菜单,没有service和dao层,数据是虚拟的。需要的欢迎下载。项目直接导入myeclipse就可以使用。访问路径localhost:8080/ajax_day02_hw/proviencecityarea.jsp

    ajaxPro写的一个例子,实现三级联动下拉框+返回服务器事件,有回调函数

    给初学的朋友写的ajaxPro写的一个例子,实现三级联动下拉框+返回服务器时间,有一个用回调函数。另一个直接在JS调服务器方法,带传参数的 QQ4066441

    省,市,区三级联动下拉框

    以上是关于“省,市,区三级联动下拉框”实现涉及的主要知识点,涵盖了前端开发、后端开发以及数据库设计等多个方面。实际项目中,开发者需要结合具体的技术栈和项目需求,灵活运用这些知识来完成功能的实现。

    下拉框三级联动

    在IT行业中,"下拉框三级联动"是一个常见的交互设计模式,主要应用于数据筛选和信息检索,常见于网页和应用程序的表单设计中。这种设计允许用户通过选择一个选项触发其他下拉框的更新,形成一种联动效果,通常用于...

Global site tag (gtag.js) - Google Analytics