模拟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 相关文章推荐
JSON 编辑器实现代码
Dec 06 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
Javascript的无new构建实例详解
May 15 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 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
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
php购物网站支付paypal使用方法
2010/11/28 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
nodejs对express中next函数的一些理解
2017/09/08 NodeJs
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python 字典中的所有方法及用法
2020/06/10 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
自我鉴定 电子商务专业
2014/01/30 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python