位置: 编程技术 - 正文
jQuery模拟实现的select点击选择效果【附demo源码下载】(jquery model)
编辑：rootadmin推荐整理分享jQuery模拟实现的select点击选择效果【附demo源码下载】(jquery model)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery模拟按钮点击,jquery模拟表单提交,jquery虚拟dom,jquery模拟按钮点击,jquery模块,jquery model,jquery实战,jquery模块,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了jQuery模拟实现的select点击选择效果。分享给大家供大家参考，具体如下：
有时候有些HTML元素无法让我们用样式控制进行控制，但是射鸡师或是客户的需求就是需要这种效果，还要让每个浏览器都显示同样的效果，这时候就会让我们这些所谓的前端攻城师很蛋疼，客户会认为交了点钱不让你折腾些东西，以为你是没做事的。面对这些对技术一窍不通的客户，技术对于他们来说就是一坨屎，以为我们都是用意念来写代码做程序的，所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已。
虽然很喜欢什么都没有修饰的默认效果，但是又不得不面对这些客户蛋疼的效果和要求，所以不得不折腾几个来回总不满足，HTML里面，不可以样式控制的元素恐怕也为数不多，select是其中的一个，，所以今天也来折腾一下这个比较喜欢自由不爱样式约束的元素，采用模拟的方式来实现select的效果。
采用模拟的好处可以任意的进行样式控制，做出各种各样的效果，在各个浏览器中的表现都一致，实现客户蛋疼的要求，但缺点也是同样的存在的，网络非常慢或客户端禁止运行脚本的时候//（尽管脚本禁止运行的机率很低，一般只会有服务器版本的浏览器上才会出现），脚本加载不到有可能会影响到其失效，无法进行操作，
其实这个效果早已广泛应用，也不算什么新鲜的了，大家可以随便看一下比较新一点的网站都能找到，下面分别是淘宝和拍拍上也采用模拟的select的截图。
淘宝模拟select：
拍拍模拟select：
本例实现效果：
实现的思路很简单，只有两步：
1、当鼠标进行移入和点击的目标元素的时候，触发弹出一个层，层内装着模拟的不同的元素的值
2、点击选择层内的元素的时候，需要将点击元素文本元素赋到目标元素中，并将元素内的一些参数值传到一个隐藏的域中进行传值
于是就有了以下的HTML、CSS和操作JS：
html：
css：
js：
你是否还期待着我的长篇大论？但很遗憾的告诉你，说明已经完毕了，也就是这么简单了，几行代码一看也就明白了。
还有不明白的？那没问题，请看DEMO，点击此处打开。
完整demo源码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例 基于角色的权限管理一般有5张表构成，如下图，这里我们要实现对角色role进行授权操作，简单来说就是要对rolemenu进行添加操作，这里前端主要用easyui-
jQuery Ztree行政地区树状展示(点击加载) Ztree行政地区树状展示（点击加载）效果如下：开始贴代码：实体类Item，用于对Ztree的节点展示publicclassItem{privateStringid;privateStringpId;privateStringname;privatei
jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能） jqGrid是一个用来显示网格数据的jQuery插件，通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。一、要引用的文件要使用jqGrid，首先页面上
标签: jquery model
本文链接地址:https://www.jiuchutong.com/biancheng/377798.html 转载请保留说明！上一篇：jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】(jquery model)
下一篇：etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
