模拟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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
谈一谈javascript闭包
Jan 28 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
微信小程序实现发送验证码按钮效果
Dec 20 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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
Smarty Foreach 使用说明
2010/03/23 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
php生成QRcode实例
2014/09/22 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
Vue计算属性的使用
2017/08/04 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
简单谈谈python中的语句和语法
2017/08/10 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
幼儿园义卖活动方案
2014/01/17 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
校园广播稿100字
2014/10/06 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android