模拟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中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
关于JavaScript轮播图的实现
Nov 20 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读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python中正则的使用指南
2016/12/04 Python
Python算法应用实战之栈详解
2017/02/04 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
python super的使用方法及实例详解
2019/09/25 Python
python logging通过json文件配置的步骤
2020/04/27 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
2014年财政工作总结
2014/12/10 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python