模拟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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
Jan 31 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
JavaScript手写数组的常用函数总结
Nov 22 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用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python设计模式之MVC模式简单示例
2018/01/10 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
暑期研修感言
2014/02/17 职场文书
大学生求职信范文
2014/05/24 职场文书
法院授权委托书格式
2014/09/28 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
python神经网络ResNet50模型
2022/05/06 Python