js实现挑选选择框效果及美化

网上有各种各样的关于挑选选择框的美化，找了很多，并没有好的样式效果。所以就找了一个利用ul li做的类似挑选选择框的效果，不废话了，先上图，效果如下：

点击一个测试，就会把列表显示出来，再次点击，列表隐藏，选择一个李，就会把跨度里的内容替换成里的内容，然后可以用射流研究…监控跨度的变化，然后执行你的代码。效果如下：

超文本标记语言代码如下：

div id='type' class='test' span投资种类/span ul class='下拉列表里期货/li li股票/li li期权/Li/ul/div id=' kind ' class=' test ' span投资类型/span ul class='下拉列表里趋势/li li震荡/li li套利/li li选股/li li择时/li /ul/divcss代码如下：

ul li{ list-style:无；}.测试{位置：相对；向左浮动：宽度： 120像素；高度： 40px左填充left : 11 px font-size : 15px；线高： 40px光标：指针；border: 1px固体# d2d2d 2 border-radius : 3px；右边距： 20px大纲：无；} .在{位置：之前测试：绝对值；right: 13pxtop: 18px宽度： 0;高度： 0;内容： " "；边框-宽度： 8px 8px 0 8px边框样式：实心；边框-color: #d36969透明；-WebKit-transit :转换。25s-moz-transit :变压器。25s-ms-transit :变压器。25s-o-transit :变压器。25stransition:变压器。25s}。测试：后{位置：绝对；右： 15xtop : 18px宽度： 0;高度： 0;内容： " "；边框-宽度： 6px 6px 0 6px边框样式：实心；边框-颜色： #fff透明；-WebKit-transit :全部。25s-moz-transit :全部。25s-ms-transit : all。25s-o-transit :所有。25秒；transition: all .25s }。测试。激活：先于{ -webkit-transform:旋转(180度);-moz-变压器：旋转(180度);-ms-变压器：旋转(180度);表示“具有…性质的”型变压器： 旋转(180度);变压器： 旋转(180度);} .测试。{ top : 20px后激活：-WebKit-变压器：旋转(180度);-moz-变压器：旋转(180度);-ms-变压器：旋转(180度);表示“具有…性质的”型变压器： 旋转(180度);变压器： 旋转(180度);}.测试。下拉列表{ position : absolute right : 0；左： 0；显示器：无；padd : 0；边界半径：继承；border: 1px固体# d2d2d2box-shadow : 2px 2px 5px rgba(0，0，0，4);}.test.active .下拉列表{显示：块；}.在{ position : absolute right : 13px底部： 100%;宽度： 0;高度： 0;内容： " "；边框-宽度： 0 8px 8px 8px边框样式：实心；边框-颜色： #d2d2d2透明；}.测试下降：后{位置：绝对；右： 15px底部： 100%;宽度： 0;高度： 0;内容： " "；边框-宽度： 0 6px 6px 6px边框样式：实心；边框-颜色： #fff透明；}.测试。下拉列表li {左侧浮动：宽度： 129像素；font-size : 14px-WebKit-transit :全部。3s轻松版；-moz-transit :全部。3s缓解；-ms-transit : all。3s缓解；-o-transit : all。3s缓解；transition: all .3s放松；文本对齐：中心；}.测试。下拉列表radius:第一类型{边框半径： 3px 3px 0 0}.测试。下拉列表李：最新类型{ border-radius : 0 3px 3px}.测试。下拉列表li:hover { color: # fff背景技术# c43c3d}对于：以前和：after两个伪元素不理解可以去看看我上篇博客点击这里

射流研究…代码如下：

函数DrOp(El){ this . DD=El；this . span=this . DD . children(' span ')；this . Li=this . DD . find(' ul . drop down Li ')；this.val=} DrOp . prototype . init events=function(){ var obj=this；obj.dd.on('click '，function(event){ $(this)。toggleClass('active ')。兄弟姐妹()。remove CLaSS(' active ')；event . stopperpagation()；});obj.li.on('click '，function(){ var opt=$(this)；obj . val=opt . html()；if (obj.span.html()==obj.val)返回；obj . span . html(obj . val)；$(文档)。单击(function() { $(')。测试’)。remove CLaSS(' active ')；});})} var test 1=new DoWn($(' # type ')；var test 2=new DrOp($(' # kind '))；test 1 . initevents()；Test2.initEvents()这里，使用构造-原型组合模式创建了一个DrOp对象。构造-原型组合模式的解释：属性写在构造器中，表示每个实例的唯一属性，使对象具体化；方法是在构造函数之外编写的，以表示每个实例共享的方法。

然而，这里有一个不好的方面，html的布局受到了限制。

精彩话题分享：javascript选择框操作总结jquery选择框操作总结

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。