设为首页收藏本站订阅更新

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步,快速开始

搜索
查看: 8393|回复: 4

小弟编写了【下拉级联复选】感觉效果很差,请高手帮忙看看

[复制链接]
发表于 2009-7-28 18:05:45 | 显示全部楼层 |阅读模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
                <title>Untitled Document</title>
        
<style type="text/css">
                                div{
                                                padding:0px;
                                                font-size:12px;
                                }
                               
                                .box0{
                                                width:120px;
                                                height:17px;
                                                border:1px solid green;
                                                float:left;
                                                padding-top:2px;
                                                padding-left:2px;
                                                overflow-y:scroll;
                                }
                                .box1{
                                                width:20px;
                                                height:17px;
                                                cursor:pointer;
                                                border:1px solid green;
                                                float:left;
                                                text-align:center;
                                                padding-top:2px;
                                }
                                .items{
                                                border:1px solid black;
                                                width:128px;
                                                display:none;
                                                height:100px;
                                                overflow-y:scroll;
                                                z-index:60;
                                }
                                p{
                                                font-size:12px;
                                                color:activeCaption;
                                                font-weight:bold;
                                }
</style>
<script>
//==============================
function Dsy(){
     this.Items={};
}
Dsy.prototype.add=function(id,iArray){
     this.Items[id]=iArray;
}
var dsy=new Dsy();
dsy.add("0",["591|福州","952|厦门","953|宁德","954|莆田","955|泉州","956|漳州","957|龙岩","958|三明","959|南平"]);
dsy.add("0_0",["鼓楼区","台江区","仓山区","马尾区","晋安区","闽侯县","连江县","罗源县","闽清县","永泰县","平潭县","福清市","长乐市","琅岐经济区"]);
dsy.add("0_1",["同安区","翔安区","集美区","海沧区","湖里区","思明区"]);
dsy.add("0_2",["蕉城区","福安市","福鼎市","霞浦县","古田县","柘荣县","周宁县","屏南县","寿宁县"]);
dsy.add("0_3",["城厢区","荔城区","涵江区","仙游县","秀屿区"]);
dsy.add("0_4",["鲤城区","丰泽区","洛江区","泉港区","晋江市","南安市","石狮市","惠安县","安溪县","德化县","永春县"]);
dsy.add("0_5",["芗城区","龙文区","龙海市","漳浦县","云霄县","东山县","诏安县","平和县","南靖县","长泰县","华安县","招商局漳州开发区","龙池开发区","金峰开发区"]);
dsy.add("0_6",["新罗区","漳平市","永定县","上杭县","武平县","长汀县","连城县"]);
dsy.add("0_7",["梅列区","三元区","永安市","明溪县","清流县","宁化县","大田县","尤溪县","沙县","将乐县","泰宁县","建宁县"]);
dsy.add("0_8",["延平区","邵武市","建阳市","建瓯市","武夷山市","顺昌县","浦城县","光泽县","松溪县","政和县"]);
//============================

function SelectCheckBox(itemName,slist,titleName){
        this.content ="";
        this.outside = "";
        this.selthis = null;
        this.flag=0;
        this.index=0;
        this.name = "itemsbox"; //默认
        this.cascade = null ; //设置级联对象
        this.cascadeSelectName = null;//存放级联选中的复选对象
        this.cascadeArray = null
        this.cascadekg = true;// 设置级联开关,默认级联时选中
        this.textobj = null ;
        var $ = function(id){return document.getElementById(id);}
        var $name = function(name){return document.getElementsByName(name);}
        //初始化
        SelectCheckBox.prototype.Init = function(itemName,slist,scb){
                if(itemName!=null){
                        scb.name = itemName;
                }
                scb.outside = "<div id='mainbox"+SelectCheckBox.index+"' style=\"width:234px;\"><div id='box"+SelectCheckBox.index+"' class='box0'>"+titleName+"</div><div id='boxbotton"+SelectCheckBox.index+"' class='box1'>↓</div>";
                scb.outside += "<div id='items"+SelectCheckBox.index+"' class='items'>";
                scb.outside += "<table border='0' width='100%' cellpadding='0' cellspacing='1' >";
                if(slist != null ){
                        for(var i=0;i<slist.length;i++){
                                var s = null;
                                if(slist.indexOf("|")!=-1){
                                        s = slist.split("|");
                                }else{
                                        s=new Array(slist,slist);
                                }
                                scb.content += "<tr bgcolor=\"#DCDCDC\" onmousemove=\"this.style.background='#0099CC'\" onmouseout=\"this.style.background='#DCDCDC'\">";
                                scb.content += "<td width=\"10%\"><input value='"+s[0]+"' name='"+scb.name+SelectCheckBox.index+"' type=checkbox ></td>";
                                scb.content += "<td><span id=\"sp\">"+s[1]+"</span></td></tr>";
                        }
                }
               
                scb.outside += scb.content;
                scb.outside += "</table></div></div>";
                this.selthis = scb;
                this.selthis.index = SelectCheckBox.index;
                SelectCheckBox.index++;
        }
       
        SelectCheckBox.prototype.onShow = function(){
                document.write(this.selthis.outside);
               
                //==============
                if(this.cascade !=null){
                        var obj = document.createElement("input");
                        obj.type="hidden";
                        obj.name=this.cascade.name;
                        var mainbox = $('mainbox'+this.selthis.index);
                        mainbox.insertBefore(obj);
                        this.selthis.cascade.textobj = obj;
                }
                //==============
                this.setOnsj(this.selthis);
        }

        SelectCheckBox.prototype.setOnsj = function(funSelthis){
                var oDiv0=$("box" + funSelthis.index);
                var oDiv1=$("boxbotton" + funSelthis.index);
                var oDiv=$("items" + funSelthis.index);
                var itemsbox = $name(funSelthis.name + funSelthis.index);
                oDiv1.selthis = this.selthis;
                oDiv0.selthis = this.selthis;
                oDiv.selthis = this.selthis;
                //=====================设置对象事件
                oDiv1.onclick=function(){
                  if(this.selthis.flag==0){
                          oDiv.style.display="block";
                          this.selthis.flag = 1;
                   }else{
                          this.selthis.flag=0;
                          oDiv.style.display="none";
                   }
                }
                oDiv0.onclick=function(){
                        if(this.selthis.flag!=0){
                                this.selthis.flag=0;
                                oDiv.style.display="none";
                        }
                }
                oDiv.onmouseleave = function(){
                        this.selthis.flag=0; this.style.display="none";     
                }
                for(var i=0;i<itemsbox.length;i++){
                        itemsbox.selthis = funSelthis;
                        itemsbox.parentNode.nextSibling.selthis = funSelthis;
                        itemsbox.parentNode.nextSibling.value = itemsbox.value;
                        itemsbox.onclick = function(){
                                this.selthis.selCityInfo(this.value,true);
                                if(this.selthis.cascadeArray!=null){
                                        if(this.checked==false){
                                                this.selthis.delCascadeArray(this.selthis,this.value);
                                        }else{
                                                this.selthis.addCascadeArray(this.selthis,this.value);
                                        }
                                }
                        }
                        itemsbox.parentNode.nextSibling.onclick = function(){
                                this.selthis.selCityInfo(this.value,false);
                                if(this.selthis.cascade!=null){
                                        var nthis = $name(this.selthis.cascade.name + this.selthis.cascade.index);
                                        for(var i=0;i<nthis.length;i++){
                                                if(this.selthis.cascade.textobj.value.indexOf(nthis.value) != -1 ){
                                                        nthis.checked = true;
                                                }else{
                                                        nthis.checked = false;
                                                }
                                        }
                                }
                        }
                }
                //=============================
        }
        //设置级联对象
        SelectCheckBox.prototype.setCascade = function(cascadeObj,cascadeName){
                cascadeObj.name = cascadeName;
                this.cascade = cascadeObj;
                this.cascade.cascadeArray = new Array();
        }
       
        SelectCheckBox.prototype.selCityInfo = function(val,flag){
                if(this.cascade != null ){  //this.cascade 要==null,说明没有加载级联对象,不做任务反应
                        var test = $name(this.name+this.index);
                        for(var i=0;i<test.length;i++){
                                if(test.value==val && test.checked==true){
                                        var dItems = dsy.Items['0_'+i];
                                        this.setItemList(dItems,this.cascadekg,flag);  //加载级联集合
                                        break;
                                }else if(test.value==val && test.checked==false){
                                        var dItems = dsy.Items['0_'+i];
                                        this.setItemList(dItems,false,flag);  //加载级联集合
                                        break;
                                }
                        }
                }
        }
       
        SelectCheckBox.prototype.setItemList = function(slist,f,flag){
                if(this.cascade != null){
                        var items = $("items" + this.cascade.selthis.index);
                        var str = "<table border='0' width='100%' cellpadding='0' cellspacing='1'>";
                        if(slist != null ){
                                for(var i=0;i<slist.length;i++){
                                        var s = null;
                                        if(slist.indexOf("|")!=-1){
                                                s = slist.split("|");
                                        }else{
                                                s=new Array(slist,slist);
                                        }
                                        str += "<tr bgcolor=\"#DCDCDC\" onmousemove=\"this.style.background='#0099CC'\" onmouseout=\"this.style.background='#DCDCDC'\">";
                                        str += "<td width=\"10%\"><input value='"+s[0]+"'  name='"+this.cascade.selthis.name+this.cascade.selthis.index+"' type=checkbox ></td>";
                                        str += "<td><span id=\"sp\">"+s[1]+"</span></td></tr>";
                                }
                        }
                        str += "</table>"
                        items.innerHTML = str;
                        this.cascade.selthis.setOnsj(this.cascade.selthis);
                        if(flag == true)
                                this.cascade.selthis.selItemNode(this.cascade.selthis,f);
                }else{
                        alert('请设置级联对象');
                }
        }

        //初始化全选级联对象及加入提交SELECT中
        SelectCheckBox.prototype.selItemNode = function(funSelthis,f){
                        var itemsbox = $name(funSelthis.name + funSelthis.index);
                        for(var i=0;i<itemsbox.length;i++){
                                itemsbox.checked = f;
                                if(f ==true){
                                        this.addCascadeArray(funSelthis,itemsbox.value);
                                }else{
                                        this.delCascadeArray(funSelthis,itemsbox.value);
                                }
                        }
                       
        }
       
        //添加选中的集合
        SelectCheckBox.prototype.addCascadeArray = function(funSelthis,val){
                var flag =false
                for(var i=0;i<funSelthis.cascadeArray.length;i++){
                        if(funSelthis.cascadeArray==val){
                                flag=true;
                                break;
                        }
                }
                if(flag ==false){
                        funSelthis.cascadeArray[funSelthis.cascadeArray.length] = val;
                        funSelthis.textobj.value = funSelthis.cascadeArray;
                }
        }

        //删除选中的集合
        SelectCheckBox.prototype.delCascadeArray = function(funSelthis,val){
                for(var i=0;i<funSelthis.cascadeArray.length;i++){
                        if(funSelthis.cascadeArray == val){
                                funSelthis.cascadeArray="";
                                break;
                        }
                }
                this.kcodeCascadeArray(funSelthis);
                funSelthis.textobj.value = funSelthis.cascadeArray;
        }

        //清理无用的集合
        SelectCheckBox.prototype.kcodeCascadeArray = function(funSelthis){
                var tempArr = new Array();
                var j=0;
                for(var i=0;i<funSelthis.cascadeArray.length;i++){
                        if(funSelthis.cascadeArray != ""){
                                tempArr[j] = funSelthis.cascadeArray;
                                j++;
                        }
                }
                funSelthis.cascadeArray = tempArr;
        }
       
        this.Init(itemName,slist,this);       
}

SelectCheckBox.index = 0;

var s = new SelectCheckBox("city",dsy.Items['0'],"请选择地市");
var s2 = new SelectCheckBox(null,null,"请选择县市");
s.setCascade(s2,"homeCity");


</script>
</head>
        <body>
                        <table width="600" border=3>
                                <tr>
                                        <td>
                                                <script>
                                                        s.onShow();
                                                       
                                                </script>
                                        </td>
                                        <td>
                                                <script>
                                               
                                                        s2.onShow();
                                                </script>
                                        </td>
                                </tr>
                        </table>
        </body>
</html>
发表于 2009-8-14 11:14:54 | 显示全部楼层
楼主辛苦了
发表于 2012-4-8 12:34:39 | 显示全部楼层
挺不错的。
发表于 2012-5-2 20:51:13 | 显示全部楼层
多谢分享
发表于 2012-5-5 11:51:47 | 显示全部楼层
挺好的!


您需要登录后才可以回帖 登录 | 加入无忧

本版积分规则

小黑屋|手机版|Archiver|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445   鄂公网安备 42011102000433号

GMT+8, 2017-11-23 19:09 , Processed in 0.094706 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表