模拟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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
通过下拉框的值来确定输入框是否可以为空的代码
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中const与define的应用区别
2013/06/18 PHP
PHP测试成功的邮件发送案例
2015/10/26 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python常见排序算法基础教程
2017/04/13 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
GWT的应用有哪两种部署模式
2012/12/21 面试题
教师师德反思材料
2014/02/15 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python