jQuery模拟实现的select点击选择效果【附demo源码下载】

</span>
<input type="hidden" name="" class="ipt" value="" id="selectTypeRel">
<em class="searchArrow hh abs">下拉选择</em>
</span>

css：

.sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;}
.sysSelect option{height:28px; line-height:28px;}
.selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;}
.selectType .ipt{width:76px; height:28px; line-height:28px; border:1px solid #CCC; display:inline-block; text-decoration:none; color:#000; text-indent:5px; outline:none;}
.selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0px; top:22px; text-indent:6px; line-height:26px; display:none;}
.selectType span a{color:#333; display:block; text-decoration:none;}
.selectType span a:hover{background-color:#f60; color:#fff;}
.selectType .searchArrow{border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; position:absolute; width:0; height:0; top:6px; right:12px; cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;}
.selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);transform-origin:50% 30%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); top:-9px/9;}

js：

$("#selectTypeText").click(function () {
  $(this).next("span").slideDown(200);
  $(".searchArrow").addClass("searchArrowRote");
});
$("#selectTypeText").blur(function () {
   $(this).next("span").slideUp(200);
   $(".searchArrow").removeClass("searchArrowRote");
});
$("#selectTypeMenu>a").click(function () {
  $("#selectTypeText").text($(this).text());
  $("#selectTypeRel").attr("value", $(this).attr("rel"));
  $(this).parent().slideUp(200);
  $(".searchArrow").removeClass("searchArrowRote");
  return false;
});

你是否还期待着我的长篇大论？但很遗憾的告诉你，说明已经完毕了，也就是这么简单了，几行代码一看也就明白了。

还有不明白的？那没问题，请看DEMO，点击此处打开。

完整demo源码点击此处本站下载。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》