li模拟原生select

由于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>