模拟select的代码


Posted in Javascript onOctober 19, 2011

几年前不知道在哪下载的源码上改的,去年开始学jquery,就改了一下,代码有点乱。
只是自己用,没有考虑写成通用的组件,所以童鞋们如果真的要拿去用的话有点麻烦

几个状态,展开收起是jquery的slide
模拟select的代码
这个模拟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.3water.com/js/2011/jquery_select/
打包下载:https://3water.com/jiaoben/39490.html
Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
prettier自动格式化去换行的实现代码
Aug 25 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 #Javascript
Notify - 基于jquery的消息通知插件
Oct 18 #Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 #Javascript
用dtree实现树形菜单 dtree使用说明
Oct 17 #Javascript
Js sort排序使用方法
Oct 17 #Javascript
jquery中ajax学习笔记4
Oct 16 #Javascript
jquery中ajax学习笔记3
Oct 16 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
基于mysql的论坛(5)
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
php表单处理操作
2017/11/16 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
php跨域调用json的例子
2013/11/13 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python中将字典转换成其json字符串
2014/07/16 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
专升本个人自我评价
2013/12/22 职场文书
自我鉴定注意事项
2014/01/19 职场文书
房屋租赁意向书
2014/04/01 职场文书
优秀班组事迹材料
2014/12/24 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书