关于select的无限级联

最新推荐文章于 2025-08-18 20:17:18 发布

原创最新推荐文章于 2025-08-18 20:17:18 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #xhtml #html #input #null

hqSelect是一款用于实现多级联动选择效果的JavaScript组件。通过配置数组cc_hqArray来定义选项之间的层级关系，并通过cc_DrawLists方法动态生成级联的下拉选择框。支持不同取值方式及隐藏域输出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*--------------------------------------------------| | 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>  <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"></mce:script> </head> <body> 信息分类： <span id="cc_hqSelect_classId"></span> <br/> <br/> 信息分类1： <span id="cc_hqSelect_aa"></span> </body> </html> 上边是已经封装好了的js文件，引用方式在下边。