JS分类选择插件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS分类选择插件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5619字，纯文字阅读大概需要9分钟。
内容图文
需要做一个选择分类工具，大致要求如下：
点击按钮，显示一级分类，指向某个一级分类显示对应二级分类，分类有几层不定。
只能选择最后一个分类，然后把分类的ID 传值给按钮的value
我的思路：
1.后台传过来的值是json，结构如下：
var json = [
{"name":"衣服" , "id" : "1" , "pid" : 0},
{"name":"裤子" , "id" : "2" , "pid" : 1}
];
pid是父类的ID，pid为0代表1级分类
2.根据json建立dom树，css样式很简单等会看最后的代码，结构如下：
<ul>
<li>
<span>衣服</span>
<ul>
<li><span title="1">衬衣</span></li>
<li><span title="2">毛衣</span></li>
<li><span title="3">内衣</span></li>
</ul>
</li>
</ul>
3.查询是否有下级分类，如果没有可以点击，点击后复制给按钮；否则绑定显示下级分类的hover事件
写了一下午，代码量大，头也晕，写得也确实不容易读。想要查看，直接复制以下代码，无图片，无外带JS，不是歪货功能OK。
<!doctype html> <html> <head> <title>分类选择器</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .box{margin-top:300px;margin-left:300px;} #btn{width:50px;height:25px;float:left} #classifyTree{float:left;position:relative;display:none;} #classifyTree ul{position:absolute;left:100%;top:0;border:1px solid #333;margin:0;padding:0;display:none} #classifyTree li{float:left;list-style-type:none;position:relative;} #classifyTree li:hover{background:#999} #classifyTree span{float:left;display:block;height:20px;white-space:nowrap} </style> </head> <body> <div class="box" id="box"> <input type="button" id="btn" value=""/> <div id="classifyTree"> <!-- html结构将会如下 <ul> <li> <span>衣服</span> <ul> <li><span title="1">衬衣</span></li> <li><span title="2">毛衣</span></li> <li><span title="3">内衣</span></li> </ul> </li> <li> <span>裤子</span> <ul> <li><span>内裤</span></li> <li><span>长裤</span></li> <li><span>短裤</span></li> </ul> </li> <li> <span>鞋子</span> <ul> <li><span>皮鞋</span></li> <li><span>布鞋</span></li> <li><span>草鞋</span></li> </ul> </li> </ul>--> </div> </div> </body> <script type="text/javascript"> //pid代表父ID,0代表根var json = [ {"name":"衣服" , "id" : "1" , "pid" : 0}, {"name":"裤子" , "id" : "2" , "pid" : 0}, {"name":"鞋子" , "id" : "3" , "pid" : 0}, {"name":"衬衣" , "id" : "4" , "pid" : 1}, {"name":"毛衣" , "id" : "5" , "pid" : 1}, {"name":"内衣" , "id" : "6" , "pid" : 1}, {"name":"大" , "id" : "10" , "pid" : 6}, {"name":"大" , "id" : "11" , "pid" : 7}, {"name":"大" , "id" : "7" , "pid" : 4}, {"name":"中" , "id" : "8" , "pid" : 4}, {"name":"小" , "id" : "9" , "pid" : 4} ];//IE下 最后一个数组不能给逗号,否则会多算一条var classifySelect = { treeRoot : document.getElementById("classifyTree"),//dom树根 btn : document.getElementById("btn"), json : this.json, rootId : 0,//一级分类ID//根据json建立dom树 setDomTree : function(){ function creatEl(name){return document.createElement(name);}//创建标签var ul = creatEl("ul"); //先建立根节点for(var i=0;i<this.json.length;i++){ if(this.json[i].pid==this.rootId){ var li = creatEl("li"); var span = creatEl("span"); span.title = this.json[i].id; span.innerHTML = this.json[i].name; li.appendChild(span); ul.appendChild(li); this.json.splice(i,1);//已经载入页面删除当前数组 i--;//数组删除，下次循环继续查询当前位置 } } this.treeRoot.appendChild(ul); this.addNodes(this.treeRoot.getElementsByTagName("ul")[0]);//获取插入的根ul,再查询是否有子类 }, //查询是否还有子分类，有则添加 addNodes : function(pUl){//parent ulfunction creatEl(name){return document.createElement(name);}//创建标签var li = pUl.getElementsByTagName("li"); /* 遍历li。特别注意：由于下个for循环条件满足添加了子类后，pUl（也就是根ul）中便添加了li,li.length会改变。 新添加的li永远在当前指针节点之后，所以不会冲突或者遗漏，而且能够在此循环结束后完成整个dom树 */for(var i=0;i<li.length;i++){ var pid = parseInt(li[i].getElementsByTagName("span")[0].title);//根据span的title存储的ID，查找json队列里是否还有子类//alert(typeof(pid));var ul = creatEl("ul"); var isExist = false;//是否存在子类for(var j=0;j<this.json.length;j++){//遍历json，if(this.json[j].pid == pid){//pid相同，添加节点到pUlvar newLi = creatEl("li"); var newSpan = creatEl("span"); newSpan.title = this.json[j].id; newSpan.innerHTML = this.json[j].name; newLi.appendChild(newSpan); ul.appendChild(newLi); this.json.splice(j,1); j--; isExist = true; } } if(isExist){ li[i].appendChild(ul); } } }, //查找分类 seekClassify : function(){ var self = this; //点击触发分类显示this.btn.onclick = function(){ self.treeRoot.style.display = "block"; self.nextClassify(self.treeRoot,"block");//显示根分类 } }, //绑定事件，隐藏和显示下级分类 bindHover : function(){ var self = this; var li = self.treeRoot.getElementsByTagName("li");//获取所有li//绑定根var root =self.treeRoot.getElementsByTagName("ul")[0]; root.onmouseover= function(){ self.nextClassify(self.treeRoot,"block"); } root.onmouseout = function(){ self.nextClassify(self.treeRoot,"none"); } for(var i=0;i<li.length;i++){ li[i].onmouseover = function(){ if(self.isNextClassify(this)){ self.nextClassify(this,"block"); } } li[i].onmouseout = function(){ if(self.isNextClassify(this)){ self.nextClassify(this,"none"); } } } }, //显示或者隐藏下级分类 nextClassify : function(self,status){ var ul = self.getElementsByTagName("ul")[0]; ul.style.display = status; }, //检查是否有下级分类，如果没有可以选择 isNextClassify : function(li){ var self = this; if(li.getElementsByTagName("ul")[0]){ returntrue; }else{ li.getElementsByTagName("span")[0].onclick = function(){//绑定选择事件 self.btn.value = this.title; self.nextClassify(self.treeRoot,"none");//选择完毕隐藏 } returnfalse; } }, init : function(){ this.setDomTree(); this.seekClassify(); this.bindHover(); } } classifySelect.init(); </script> </html>
原文：http://www.cnblogs.com/1wen/p/4037956.html
内容总结
以上是互联网集市为您收集整理的JS分类选择插件全部内容，希望文章能够帮你解决JS分类选择插件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。