/*--------------------------------------------------| | hqSelect 1.0.0 | www.hq88.com | |---------------------------------------------------| | Copyright (c) 2010-2011 cc:532086879 | | | | | | Updated: 01.06.2011 | |--------------------------------------------------*/ function hqSelect(objName){ this.config={ cc_tips : "请选择分类", cc_method : 0, cc_hqArray: {}, cc_inputType: "hidden", cc_name: "classId" }; this.obj=objName; this.cc_allId=""; this.cc_value=""; } hqSelect.prototype.cc_IsNextClass=function(id){ for(var i=0;i<this.config.cc_hqArray.length;i++){ if(this.config.cc_hqArray[i][0]==id){ return true; } } return false; } hqSelect.prototype.cc_getParentId=function(id){ for(var i=0;i<this.config.cc_hqArray.length;i++){ if(this.config.cc_hqArray[i][1]==id){ return this.config.cc_hqArray[i][0]; } } return -1; } hqSelect.prototype.cc_DrawLists=function(id,html){ //alert("aa"); var parentId=this.cc_getParentId(id); var theSelected=""; var htmlCode=""; this.cc_allId+="," + id; parentId=(parentId==0) ? -1:parentId; htmlCode="<select name=/""+this.config.cc_name+"_PPST/" id=/""+this.config.cc_name+"_PPST/" onChange={javascript:"+this.obj+".cc_DrawLists(this.value.split(/"|/")[0],/"/")}>/n"; htmlCode+="<option value=/""+parentId+"/">"+this.config.cc_tips+"</option>/n"; parentId=(parentId==-1) ? 0:parentId; for(var i=0;i<this.config.cc_hqArray.length;i++){ if(this.config.cc_hqArray[i][1]==id){ theSelected=" selected"; switch(this.config.cc_method){ case 0: this.cc_value+="," + this.config.cc_hqArray[i][1]; break; case 1: this.cc_value+="," + this.config.cc_hqArray[i][2]; break; case 2: this.cc_value+="," + this.config.cc_hqArray[i][1] + "|" + this.config.cc_hqArray[i][2]; break; } }else{ theSelected=""; } if(this.config.cc_hqArray[i][0]==parentId){ htmlCode+="<option value=/""+this.config.cc_hqArray[i][1]+"|"+this.config.cc_hqArray[i][2]+"/""+theSelected+">"+this.config.cc_hqArray[i][2]+"</option>/n"; } } htmlCode+="</select>/n"+html; if(parentId==0){ if(this.cc_IsNextClass(this.cc_allId.split(",")[1])){ htmlCode+="<select name=/""+this.config.cc_name+"_PPST/" id=/""+this.config.cc_name+"_PPST/" onChange={javascript:"+this.obj+".cc_DrawLists(this.value.split(/"|/")[0],/"/")}>/n"; htmlCode+="<option value=/""+parentId+"/">"+this.config.cc_tips+"</option>/n"; for(var i=0;i<this.config.cc_hqArray.length;i++){ if(cc_hqArray[i][0]==this.cc_allId.split(",")[1]){ htmlCode+="<option value=/""+this.config.cc_hqArray[i][1]+"|"+this.config.cc_hqArray[i][2]+"/">"+this.config.cc_hqArray[i][2]+"</option>/n"; } } htmlCode+="</select>/n" } this.cc_allId=""; var value=this.cc_value.split(",")[1]; if(value==null) value=""; htmlCode+="<input type=/""+this.config.cc_inputType+"/" name=/""+this.config.cc_name+"/" id=/""+this.config.cc_name+"/" value=/""+value+"/" />" this.cc_value=""; document.getElementById("cc_hqSelect_"+this.config.cc_name).innerHTML=htmlCode; }else{ this.cc_DrawLists(parentId,htmlCode); } } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hqSelect</title> <!-- 使用说明如下:引入核心js文件:hqSelect.js 实例化数组cc_hqArray 调用cc_DrawLists方法,该方法中的classId在select定位中标签Id有关联 在页面指定一个显示的标签位Id 如:cc_hqSelect_classId。 hqSelect.config的具体参数如下: cc_tips : "请选择分类", //默认显示的值 cc_method : 0, //取值的方式 0 只取select的value ,1 只取select的text, 2 两个都取以"|" 分隔 cc_hqArray: {}, //输入的值 cc_inputType: "hidden", //input 的属性,一般隐藏 cc_name: "classId" //input name的值。 --> <mce:script src="hqSelect_1.0.0.min.js" mce_src="hqSelect_1.0.0.min.js" type="text/javascript"></mce:script> <mce:script language="javascript" defer="defer"><!-- var cc_hqArray = new Array( [0,1,"精英商学院"], [0,2,"企业商学院"], [0,3,"集团商学院"], [1,4,"精英商学院(一年)"], [1,5,"精英商学院(两年)"], [1,6,"精英商学院(三年)"], [2,7,"企业商学院(一年)"], [2,8,"企业商学院(两年)"], [2,9,"企业商学院(三年)"], [3,10,"集团商学院(一年)"], [3,11,"集团商学院(两年)"], [3,12,"集团商学院(三年)"]); var hq=new hqSelect('hq'); hq.config.cc_hqArray=cc_hqArray; var cc_hqArray1 = new Array( [0,1,"1精英商学院"], [0,2,"1企业商学院"], [0,3,"1集团商学院"], [1,4,"1精英商学院(一年)"], [1,5,"1精英商学院(两年)"], [1,6,"1精英商学院(三年)"], [2,7,"1企业商学院(一年)"], [2,8,"1企业商学院(两年)"], [2,9,"1企业商学院(三年)"], [3,10,"1集团商学院(一年)"], [3,11,"1集团商学院(两年)"], [3,12,"1集团商学院(三年)"]); var hq1=new hqSelect('hq1'); hq1.config.cc_hqArray=cc_hqArray1; hq1.config.cc_name="aa"; window.onload = function() { hq.cc_DrawLists(1,""); hq1.cc_DrawLists(1,""); } // --></mce:script> </head> <body> 信息分类: <span id="cc_hqSelect_classId"></span> <br/> <br/> 信息分类1: <span id="cc_hqSelect_aa"></span> </body> </html> 上边是已经封装好了的js文件,引用方式在下边。