模拟select的代码

几年前不知道在哪下载的源码上改的，去年开始学jquery，就改了一下，代码有点乱。只是自己用，没有考虑写成通用的组件，所以童鞋们如果真的要拿去用的话有点麻烦几个状态，展开收起是jquery的slide这个模拟select，只是很简单的实现了单独一个select的部分功能没有实现比如optgroup，文字长度自适应（图片会因此修改麻烦）再说如果页面多个select，css处理也麻烦，数据、联动都要增加大量代码小有小的好处，所以就不考虑进行封装，这里有不少童鞋做的比我好很多，功能很强大再所以，就偷一下懒，在这里送上js注释给初学者复制代码代码如下: $(document).ready(function(){ var newSelect = $("#aa"); newSelect.click(function(e){ //如果没有class，即关闭状态，就展开 //打开状态就不需要处理，冒泡执行document.click if(this.className == ""){ this.className = "open"; $(this.nextSibling).slideDown("fast"); e.stopPropagation();//阻止冒泡 } }); //关闭收起 function closeSelect(obj){ $(obj.nextSibling).slideUp("fast",function(){ obj.className = ""; }); } $(document).bind("click", function() { closeSelect(newSelect[0]); }); newSelect.next().click(function(e){ var src = e.target; //如果有选中任何一项，取选中文字执行替换操作并改变样式，相当于select.onchange //冒泡执行document.click关闭收起 if(src.tagName == "A"){ var PObj = src.parentNode; PObj.previousSibling.innerHTML = src.innerHTML; $(src).siblings().removeClass(); src.className = "current"; PObj.nextSibling.value = src.getAttribute("value"); } }); }); 演示地址：http://demo.jb51.net/js/2011/jquery_select/打包下载：http://www.jb51.net/jiaoben/39490.html

摘要：本节补充ajax学习笔记1中第二种方式：使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍，本节主要介绍需要修改的>>>详细阅读

本文标题：模拟select的代码

地址：http://www.17bianji.com/kaifa2/JS/24049.html

1/2 1