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

很多群员问了关于下拉框美化的问题，现打一个下拉框美化的制作过程，其实是模拟出来的下拉框。问题1：为什么要模拟下拉框？ 1，浏览器自带的下拉框样式不好看。 2，在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。 OK，明白这个问题后，我们就开始用jQuery制作模拟下拉框。第一步：先搭建好结构这是普通的下拉框代码： XML/HTML代码复制代码代码如下: <select name="abc" id="abc"> <option value="1">选项一</option> <option value="2">选项二</option> <option value="3">选项三</option> <option value="4">选项四</option> <option value="5">选项五</option> <option value="6">选项六</option> </select> 这个是模拟出来的： XML/HTML代码复制代码代码如下: <div class="CRselectBox"> <input type="hidden" value="" name="abc" id="abc"/>  <input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/>  <a class="CRselectValue" href="#">选项一</a> <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> 1，先搭建好结构选项一选项二选项三选项四选项五选项六 VS 选项一选项一选项二选项三选项四选项五选项六 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 第二步：构建效果主要就是Jquery代码： JavaScript代码复制代码代码如下: $(function(){ $(".CRselectBox").hover(function(){ $(this).addClass("CRselectBoxHover"); },function(){ $(this).removeClass("CRselectBoxHover"); }); $(".CRselectValue").click(function(){ $(this).blur(); $(".CRselectBoxOptions").show(); return false; }); $(".CRselectBoxItem a").click(function(){ $(this).blur(); var value = $(this).attr("rel"); var txt = $(this).text(); $("#abc").val(value); $("#abc_CRtext").val(txt); $(".CRselectValue").text(txt); $(".CRselectBoxItem a").removeClass("selected"); $(this).addClass("selected"); $(".CRselectBoxOptions").hide(); return false; }); /*点击任何地方关闭层*/ $(document).click(function(event){ if( $(event.target).attr("class") != "CRselectBox" ){ $(".CRselectBoxOptions").hide(); } }); /*===================Test========================*/ $("#test").click(function(){ var value = $("#abc").val(); var txt = $("#abc_CRtext").val(); alert( "你本次选择的值和文本分别是：" + value +" , "+txt ); }); }) 2，构建效果(需要刷新下，才能看到效果) 选项一选项一选项二选项三选项四选项五选项六 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 其实到这里已经算是完成了。为了方便利用，就做成插件吧。 http://demo.jb51.net/js/JQuery_select/demo3.html完整实例打包下载

　　推荐阅读

　　js Date自定义函数延迟脚本执行

复制代码代码如下: function delay(numberMillis){ var now = new Date(); var exitTime = now.getTime()+numberMillis; while(true){ now = new Date(); if(now.getTime() > exitTime) return; } } document.wri>>>详细阅读

本文标题：用jQuery实现的模拟下拉框代码

地址：http://www.17bianji.com/kaifa2/JS/26922.html

1/2 1