模拟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下获取div中的数据的原理分析
Apr 07 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
JS实现斐波那契数列的五种方式(小结)
Sep 09 Javascript
用javascript实现倒计时效果
Feb 09 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 URL跳转代码 减少外链
2011/06/25 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php数组指针操作详解
2017/02/14 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
python之import机制详解
2014/07/03 Python
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python自动化发送邮件实例讲解
2021/01/04 Python
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
教师工作失职检讨书
2014/09/18 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
导师对论文的学术评语
2015/01/04 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js