本文使用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> 主要就是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 ); }); }) |