模拟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.extend 函数的详细用法
Jun 27 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jquery分页对象使用示例
Apr 01 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
js命名空间写法示例
Dec 18 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
微信小程序实现吸顶特效
Jan 08 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/07/05 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python入门篇之字典
2014/10/17 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
详解python里的命名规范
2018/07/16 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
django 单表操作实例详解
2019/07/30 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
什么是数据抽象
2016/11/26 面试题
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
商务会议邀请函
2014/01/09 职场文书
红旗方阵解说词
2014/02/12 职场文书
外贸会计专业自荐信
2014/06/22 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
个人年终总结结尾
2015/03/06 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
 Python 中 logging 模块使用详情
2022/03/03 Python