用jQuery制作模拟下拉框

核心提示： 第二步：构建效果主要就是Jquery代码：JavaScript代码1.$(function(){2.$(".CRselectBox").hover(function(){3.$(this).addClass("CRselectBoxHover");4.},

第二步：构建效果

主要就是Jquery代码：

JavaScript代码

　　　1.　$(function(){　　　
　　　2.　　　　　$(".CRselectBox").hover(function(){　　　
　　　3.　　　　　　　　　$(this).addClass("CRselectBoxHover");　　　
　　　4.　　　　　},function(){　　　
　　　5.　　　　　　　　　$(this).removeClass("CRselectBoxHover");　　　
　　　6.　　　　　});　　　
　　　7.　　　　　$(".CRselectValue").click(function(){　　　
　　　8.　　　　　　　　　$(this).blur();　　　
　　　9.　　　　　　　　　$(".CRselectBoxOptions").show();　　　
　　10.　　　　　　　　　return　false;　　　
　　11.　　　　　});　　　
　　12.　　　　　$(".CRselectBoxItem　a").click(function(){　　　
　　13.　　　　　　　　　$(this).blur();　　　
　　14.　　　　　　　　　var　value　=　$(this).attr("rel");　　　
　　15.　　　　　　　　　var　txt　=　$(this).text();　　　
　　16.　　　　　　　　　$("#abc").val(value);　　　
　　17.　　　　　　　　　$("#abc_CRtext").val(txt);　　　
　　18.　　　　　　　　　$(".CRselectValue").text(txt);　　　
　　19.　　　　　　　　　$(".CRselectBoxItem　a").removeClass("selected");　　　
　　20.　　　　　　　　　$(this).addClass("selected");　　　
　　21.　　　　　　　　　$(".CRselectBoxOptions").hide();　　　
　　22.　　　　　　　　　return　false;　　　
　　23.　　　　　});　　　
　　24.　　　　　/*点击任何地方关闭层*/　　
　　25.　　　　　$(document).click(function(event){　　　
　　26.　　　　　　　　　if(　$(event.target).attr("class")　!=　"CRselectBox"　){　　　
　　27.　　　　　　　　　　　　　$(".CRselectBoxOptions").hide();　　　
　　28.　　　　　　　　　}　　　
　　29.　　　　　});　　　
　　30.　　　
　　31.　　　　　/*===================Test========================*/　　
　　32.　　　　　$("#test").click(function(){　　　
　　33.　　　　　　　　　var　value　=　$("#abc").val();　　　
　　34.　　　　　　　　　var　txt　=　$("#abc_CRtext").val();　　　
　　35.　　　　　　　　　alert(　"你本次选择的值和文本分别是："　+　value　+"　　,　"+txt　);　　　
　　36.　　　　　});　　　
　　37.　})　　

查看演示：http://www.rainweb.cn/JavaScript/JQuery_select/demo2.html

http://www.rainweb.cn/JavaScript/JQuery_select/demo3.html

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

本文示例源代码或素材下载