由于select原生各种限制太多,UI展示问题,使用模拟下拉框体验更佳;代码简单易用,根据需求调整。不多说,直接上效果图
html代码演示
<input type="hidden" name="didian" id="didian"> <!-- 隐藏框 表单提交时把value填充进来 -->
<span id="jiguan" value="不限">不限 </span> <!-- 选择框 点击时触发jq事件 -->
<ul class="jiguan_ul" style="display: none;"> <!-- 下拉框的内容 -->
<li data-value="不限">不限</li>
<li data-value="北京">北京</li>
<li data-value="上海">上海</li>
<li data-value="天津">天津</li>
<li data-value="重庆">重庆</li>
<li data-value="河北省">河北省</li>
<li data-value="山西省">山西省</li>
<li data-value="河南省">河南省</li>
<li data-value="辽宁省">辽宁省</li>
<li data-value="吉林省">吉林省</li>
<li data-value="黑龙江省">黑龙江省</li>
<li data-value="内蒙古自治区">内蒙古自治区</li>
<li data-value="江苏省">江苏省</li>
<li data-value="山东省">山东省</li>
<li data-value="安徽省">安徽省</li>
<li data-value="浙江省">浙江省</li>
<li data-value="福建省">福建省</li>
<li data-value="湖北省">湖北省</li>
<li data-value="湖南省">湖南省</li>
<li data-value="广东省">广东省</li>
<li data-value="广西壮族自治区">广西壮族自治区</li>
<li data-value="江西省">江西省</li>
<li data-value="四川省">四川省</li>
<li data-value="海南省">海南省</li>
<li data-value="贵州省">贵州省</li>
<li data-value="云南省">云南省</li>
<li data-value="西藏自治区">西藏自治区</li>
<li data-value="陕西省">陕西省</li>
<li data-value="甘肃省">甘肃省</li>
<li data-value="青海省">青海省</li>
<li data-value="宁夏回族自治区">宁夏回族自治区</li>
<li data-value="新疆维吾尔自治区">新疆维吾尔自治区</li>
</ul>
js代码:
// li 模拟select
//选择时展开下拉框
$("#jiguan").click(function(){
$(this).next().show();
})
//移入时的事件:选择li时把value放入选择器中,同时把值放入input隐藏框内,以便提交表单时填充name值。
$(".jiguan_content").mousemove(function() {
$(".jiguan_ul li").click(function(event){
$("#jiguan").text($(this).data("value"))
$("#didian").val($(this).data("value"));
event.stopPropagation();
})
})
//移出时自动隐藏下拉框
$(".jiguan_content").mouseleave(function() {
$(".jiguan_ul").fadeOut("100");
})
css样式调整:
<style type="text/css" media="screen">
/* 滚动条 start*/
.jiguan_ul::-webkit-scrollbar {
width: 5px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
.jiguan_ul::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
.jiguan_ul::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(77, 90, 175, 0.7);
}
.jiguan_ul::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(77, 90, 175, 1);
}
.jiguan_content { position:relative; }
.jiguan_ul { height:250px;position:absolute;overflow-y:scroll;z-index:999;background:#fff;box-shadow:0 0 5px #eee;}
.jiguan_ul li { padding: 5px;cursor: pointer;display: block; }
.jiguan_ul li:hover { background-color: #eee; }
#jiguan { padding: 5px; border: 1px solid #eee; display: block; width: 150px; padding-right: 5px}
</style>