本文给出了一个通过jQuery仿真实现选择点击选择效果的例子。分享给大家参考，如下：

有时候有些HTML元素是风格控制不了的，但是鸡射手或者客户的需求就是需要这个效果，每个浏览器都要显示同样的效果。这个时候会让我们这些所谓的前端攻城工程师很痛苦，客户会以为你交了点钱就不让你折腾点什么，以为你什么都没做。面对这些对技术一无所知的客户，技术对他们来说就是一坨屎，以为我们都是用想法写代码、写程序的，所以我们都把自己的劳动成果看得和单纯拉出一坨屎一样廉价。

虽然我很喜欢没有修改的默认效果，但是我要面对这些客户的痛苦效果和要求，所以我要折腾几次。HTML中可能没有太多不能进行样式控制的元素，select就是其中之一，所以今天我就来折腾一下这个比较喜欢自由但是不喜欢样式约束的元素，通过模拟实现select的效果。

采用模拟的好处是可以任意风格控制，可以做出各种效果。每个浏览器中的性能都是一致的，满足了客户的要求，但缺点也是存在的。当网络很慢或者客户端禁止运行脚本//(虽然脚本禁止的概率很低，但通常只出现在服务器版本的浏览器中)时，如果不加载，可能会影响脚本的失败，无法进行操作。

事实上，这种效果已经被广泛使用，并不是什么新鲜事。随便看看更新的网站就能找到。下面是淘宝和精选的截图，也是在pat上模拟的。

淘宝模拟精选：

Pat模拟选择：

这个例子的效果是：

这个想法的实现很简单，只有两步：

1.当鼠标移入并单击目标元素时，会弹出一个图层，其中包含不同元素的模拟值

2.单击选择层中的元素时，需要将被单击元素的文本元素分配给目标元素，并将元素中的一些参数值转移到隐藏字段中进行值转移

于是就有了下面的HTML、CSS和操作JS:

html:

span class=' select type ' A title=' href=' # ' class=' ipt ' id=' select type text ' all/A span id=' select type menu ' A rel=' 0 ' title=' href=' # ' all/A rel=' 1 ' title=' href=' # '商品/A rel=' 2 ' title=' href=' # ' store/A/span输入类型=' hidden ' name=' class=' ipt ' value=' id=' select type rel ' em class。sysSelect { width:76px高度：28 px行高：28 pxborder:1px固体# CCCfont-size :14 px；}.sysSelect选项{高：28像素行高：28 px}.选择TYPe {位置：相对；宽度：78 px高度：30 px线高：30 pxfont-size :14 px}.选择类型ipt { width:76px高度：28 px行高：28 pxborder:1px固体# CCCdisplay :内嵌块；文本装饰：无；color : # 000 text-缩进：5 pxoutline:none}。选择类型span { position : absolute宽度：76 px背景-color : # fff；border:1px固体# CCC边框-顶部-样式：禁用；left :0 pxtop :22 extextext-缩进：6 px线高：26 pxdisplay:none}。选择类型跨度a { color: # 333显示：块；文本装饰：无；}.选择TYPe span a :悬停{ background-color : # f60color: # fff}。选择类型搜索箭头{边框-顶部：6 px实心# 666；左边框：6px实心# FFF；右边框：6px实心# FFF；位置：绝对；宽度：0;高度：0;top :6 pxright :12 xcursor :指针指针；-网络套件-transit :-网络套件-转换0.2s简易版；-moz-transit :-moz-transit 0.2s轻松版；-o-transit :-o-transit 0.2s轻松进入；transition:transform 0.2s轻松进入；飞越：隐藏；文本缩进：-2000像素；}.选择类型。搜索箭头保护{-moz-transform :旋转(180度);-moz-transform-origin :50% 30%；-网络套件-transform :旋转(180度);-web套件-转换-origin :50% 30%；表示“具有…性质的”型变压器：旋转(180度);-o-transform-origin :50% 30%；变压器：旋转(180度);转换-原始：50% 30%;过滤器： progid : maximagettransform .微软。基本页面(轮换=2);top :-9px/9；}js:

$('#selectTypeText ').单击(function () { $(this)).下一个(' span ').向下滑动(200);$('.搜索箭头')。添加类(“搜索箭头死记硬背”)；});$('#selectTypeText ').模糊(函数(){ $(此)).下一个(' span ').向上滑动(200);$('.搜索箭头')。移除类(“搜索箭头死记硬背”)；});$('#selectTypeMenua ').单击(函数(){ $('#selectTypeText ')).文本($(这个).text())；$('#selectTypeRel ').attr('value '，$(this).attr(' rel ')；$(这个)。父项()。向上滑动(200);$('.搜索箭头')。移除类(“搜索箭头死记硬背”)；返回false })；你是否还期待着我的长篇大论？但很遗憾的告诉你，说明已经完毕了，也就是这么简单了，几行代码一看也就明白了。

还有不明白的？那没问题，请看演示，点击此处打开。

完整演示源码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery窗口操作技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。