模拟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 相关文章推荐
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
js中实现继承的五种方法
Jan 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
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
js array数组对象操作方法汇总
2019/03/18 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
python区分不同数据类型的方法
2019/10/14 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python实现126邮箱发送邮件
2020/05/20 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
行政副总岗位职责
2014/02/23 职场文书
春节联欢会策划方案
2014/05/16 职场文书
法语专业求职信
2014/07/20 职场文书
单位消防安全责任书
2014/07/23 职场文书
法院授权委托书格式
2014/09/28 职场文书
2014年收银工作总结
2014/11/13 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
2016银行求职自荐信
2016/01/28 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技