小弟编写了【下拉级联复选】感觉效果很差，请高手帮忙看看原创文章 & 讨论汇总版无忧脚本

zjy3t 发表于 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=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+"' name='"+scb.name+SelectCheckBox.index+"' type=checkbox ></td>";
scb.content += "<td><span id=\"sp\">"+s+"</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+"'  name='"+this.cascade.selthis.name+this.cascade.selthis.index+"' type=checkbox ></td>";
str += "<td><span id=\"sp\">"+s+"</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 = 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 = 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>

naojin 发表于 2009-8-14 11:14:54

楼主辛苦了

页: [1]

无忧脚本's Archiver

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