这套漂亮的下拉菜单选择框，无论是实用性上，还是视觉效果上，都可以说是非常高级的，特别是视觉带有美化动态的特效，和默认的效果相比美的不是一星半点，想要此类功能的朋友可以看看效果哦。
使用方法：
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".drop .option").click(function() {
var val = $(this).attr("data-value"),
$drop = $(".drop"),
prevActive = $(".drop .option.active").attr("data-value"),
options = $(".drop .option").length;
$drop.find(".option.active").addClass("mini-hack");
$drop.toggleClass("visible");
$drop.removeClass("withBG");
$(this).css("top");
$drop.toggleClass("opacity");
$(".mini-hack").removeClass("mini-hack");
if ($drop.hasClass("visible")) {
setTimeout(function() {
$drop.addClass("withBG");
}, 400 + options*100);
}
triggerAnimation();
if (val !== "placeholder" || prevActive === "placeholder") {
$(".drop .option").removeClass("active");
$(this).addClass("active");
};
});
function triggerAnimation() {
var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;
$(".drop").css("width", "24em");
setTimeout(function() {
$(".drop").css("width", finalWidth + "em");
}, 400);
}
});
</script>
效果截图：
