Ajax实现二级或者三级联动下拉框

$.ajax({ url: url + "option=dropdown",
  type: "post",
  data: "znstr=" + str + "&znclass="+ zclass + "",
  datatype: "html",
  error: function(xmlhttprequest) { },
  success: function(data) {
  if(data!="false")
  {  
  if(data.tostring().length > 0)
  {
  cleardrop(znclass);  
  }  
  var vars = new array(); 
  vars = data.tostring().split(',');
  for(var i =0;i< (vars.length) ;i=i+2 )
  {
  switch(znclass)
  {
  case 2:
  $("#citytwo").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
  break;
  case 3:
  $("#citythree").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
  break;
  case 4:
  $("#cityfour").append("<option value='"+vars[i+1]+"'>"+vars[i]+"</option>");
  break;
  }
   
  }
  %>
 
  下面看个完整实例
 
  <%@ 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/网页特效">
        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>

action

public actionforward doselectwzlb(
            actionmapping mapping,
            actionform form,
            https教程ervletrequest 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;
        }
    }

时间： 2024-09-02 15:46:17

Ajax实现二级或者三级联动下拉框的相关文章

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码_javascript技巧

像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

javascript省市区三级联动下拉框菜单实例演示_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码,像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"

javascript实现省市区三级联动下拉框菜单_javascript技巧

本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下:   首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http

Android实现三级联动下拉框 下拉列表spinner

 主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值                  XML布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="m

Android实现三级联动下拉框 下拉列表spinner的实例代码_Android

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值 列表spinner的实例代码_Android-spinner下拉框样式">             XML布局: 复制代码 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schema

Android实现三级联动下拉框 下拉列表spinner的实例代码

主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下拉框的选中值改变时,随之修改下级的适配器的绑定值 XML布局: 复制代码 代码如下:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="mat

省市区三级联动下拉框菜单javascript版_javascript技巧

实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat

Ajax实现无刷新三联动下拉框_AJAX相关

<HTML> <HEAD> <title>Ajax实现无刷新三联动下拉框</title> <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR"> <meta content="C#" name="CODE_LANGUAGE"> <meta content="Jav

AJAX实现联动下拉框的问题（求助~~~）

问题描述 三级联动下拉框的问题.因为要求不能刷新页面,而且下拉框的内容都是在数据库,动态的,所以要求用AJAX.下拉框数据通过AJAX取得和联动方面没有问题.现在的问题是,在页面提交的时候会出错.比如:初期:DDL1有一个空项和一项Level1,DDL2有一个空项画面上,DDL1选择Level1,AJAX取得对应的Level21和Level22,通过JavaScript添加到DDL2上面.如果选择Level21或者Level22,然后点击画面上面的一个提交按钮,页面就会报错.如果不对DDL2进行