当前位置：首页 > 资讯 > 技术文档

用jQuery实现的模拟下拉框代码

时间：2020-03-02 18:25 编辑：来源：阅读：
扫一扫，手机访问

摘要：用jQuery实现的模拟下拉框代码

很多群员问了关于下拉框美化的问题，现打一个下拉框美化的制作过程，其实是模拟出来的下拉框。
问题1：为什么要模拟下拉框？
1，浏览器自带的下拉框样式不好看。
2，在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。
OK，明白这个问题后，我们就开始用jQuery制作模拟下拉框。

第一步：先搭建好结构
这是普通的下拉框代码：
XML/HTML代码

[url=#]
<ul class="CRselectBoxOptions">
<li class="CRselectBoxItem"><a href="#" class="selected" rel="1">选项一</a></li>
<li class="CRselectBoxItem"><a href="#" rel="2">选项二</a></li>
<li class="CRselectBoxItem"><a href="#" rel="3">选项三</a></li>
<li class="CRselectBoxItem"><a href="#" rel="4">选项四</a></li>
<li class="CRselectBoxItem"><a href="#" rel="5">选项五</a></li>
<li class="CRselectBoxItem"><a href="#" rel="6">选项六</a></li>
</ul>
</div>

VS 
 
<div class="CRselectBox"> 
    <input id="abc" name="abc" type="hidden" value=""></input>  
    <input id="abc_CRtext" name="abc_CRtext" type="hidden" value=""></input>  
    <a class="CRselectValue" href="http://www.1sucai.cn/article/22425.htm#">选项一[/url] 
    [list] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项一[/url][/*] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项二[/url][/*] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项三[/url][/*] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项四[/url][/*] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项五[/url][/*] 
        [*][url=http://www.1sucai.cn/article/22425.htm#]选项六[/url][/*] 
    [/list] 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

第二步：构建效果
主要就是Jquery代码：
JavaScript代码

[url=http://www.1sucai.cn/article/22425.htm#]选项一[/url] [list] [*][url=http://www.1sucai.cn/article/22425.htm#]选项一[/url][/*] [*][url=http://www.1sucai.cn/article/22425.htm#]选项二[/url][/*] [*][url=http://www.1sucai.cn/article/22425.htm#]选项三[/url][/*] [*][url=http://www.1sucai.cn/article/22425.htm#]选项四[/url][/*] [*][url=http://www.1sucai.cn/article/22425.htm#]选项五[/url][/*] [*][url=http://www.1sucai.cn/article/22425.htm#]选项六[/url][/*] [/list]

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

其实到这里已经算是完成了。为了方便利用，就做成插件吧。
[url=http://demo.jb51.net/js/JQuery_select/demo3.html%E5%AE%8C%E6%95%B4%E5%AE%9E%E4%BE%8B%E6%89%93%E5%8C%85%E4%B8%8B%E8%BD%BD]http://demo.jb51.net/js/JQuery_select/demo3.html

完整实例打包下载[/url]

全部评论(0)

上一篇：jquery(javascript)自动序列编号和属性编号实现代码
下一篇：jQuery实现多张图片上传预览（不经过后端处理）

资讯排行榜
更多>>