【JQuery】Select下拉框美化，实现鼠标悬浮显示下拉

·    简介

    select下拉框在前端的html页面编写中是一个使用颇多的标签，但是其略丑的风格却是让咂舌，虽然chome等浏览器在其发布的新版本中已经将select下拉框优化的很漂亮，但是对与大多浏览器来说依然是老样子，本示例中使用JQuery+UL，LI实现美化版的自定义select,其实也就是模拟一个select下拉框.

·    效果展示

·    原理

    对于一个select来说总体上分为两部分，如图所示绿色部分是用来显示当前的选项，粉红色的部分是用于显示下拉项的，当我们选中一个下拉项的时候，顶部的当前选项就会改变.

    根据这个原理，我们使用一个DIV和一个UL列表模拟出这种效果，如上面的图那样，绿色部分用一个DIV，粉红色部分用一个UL列表，初始的时候UL隐藏不显示，当我们鼠标移动到绿色的DIV上的时候UL属性设置为显示，当我们点击UL的Li子项的时候使用JS获取到Li的内容并显示到绿色的DIV内，这样我们就能模拟出一个自定义的美化版本的Select了;

下面是主要的html代码:

<div id="select-con">
     <input type="hidden" name="st" id="st" value="app" />
     <div id="select-bg"></div>
     <span id="select-selected">用于显示当前的选项</span>
     <ul id="select-list">
          <li listfor="app" selected="selected">应用</li>
          <li listfor="blog" >博文</li>
          <li listfor="codeorg">代码</li>
      </ul>
</div>

解读:

1、  id="select-con"的DIV是整个select的容器

2、  第二行的隐藏的 input 是我们要模拟的表单项

3、  id="select-selected"的span适用于显示当前的选中项

4、  UL就是我们的下拉列表

5、  li中的listfor项是我们自定义的域，用于保存当前项的value，用于对input隐藏域赋值。

6、  UL的默认选项我们用 selected="selected" 来标记

下面是小悠写的一个html例子，里面有注释:

解压密码 yscode

下载地址:http://pan.baidu.com/s/1nt7EOEd

本文出自悠然品鉴原创,转载请注明出处:http://www.youranshare.com/codeorg/sid/119.html