模拟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 相关文章推荐
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
vue实现列表的添加点击
Dec 29 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Angular实现响应式表单
Aug 04 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
微信小程序中时间戳和日期的相互转换问题
Jul 09 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php 变量定义方法
2009/06/14 PHP
PHP中for与foreach的区别分析
2011/03/09 PHP
php学习之 数组声明
2011/06/09 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
解决Python二维数组赋值问题
2019/11/28 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python网络编程之五子棋游戏
2020/05/14 Python
Python调用C/C++的方法解析
2020/08/05 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python空元组在all中返回结果详解
2020/12/15 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
经典c++面试题四
2015/05/14 面试题
优秀广告词大全
2014/03/19 职场文书
给学校建议书范文
2014/05/13 职场文书
社团活动总结报告
2014/06/27 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python