管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用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"/> <!-- hidden 用来代替select的值 -->

　　<input type="hidden" value="" name="abc_CRtext" id="abc_CRtext"/> <!-- hidden 用来代替select的文本-->

　　<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>

　　

　　 [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 );

　　});

　　})

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　其实到这里已经算是完成了。为了方便利用，就做成插件吧。

　　http://demo.glzy8.com/js/JQuery_select/demo3.html

　　完整实例打包下载

教程首页 更多教程