好看的下拉菜單，樣式及JQ代碼

先看一下 效果圖

點擊左側字母，右邊根據錨點切換到對應位置

CSS代碼

<style>
    .city-select_box{display: inline-block;width: 200px;line-height: 30px; height: 19px;margin-right: 8px;}
    .city-select{position:absolute;display:inline-block;height:32px;width:200px;vertical-align:middle;line-height:32px;border-width:1px;border-style:solid;border-color:#a7b5bc #ced9df #ced9df #a7b5bc;-moz-box-shadow:0 1px 2px #ced9df inset;-webkit-box-shadow:0 1px 2px #ced9df inset;box-shadow:0 1px 2px #ced9df inset}
    .city-select__selected{position:relative;}
    .city-select__selected .city-select__text{display:inline-block;padding:0 10px;overflow:hidden;white-space:nowrap;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box}
    .city-select__selected .city-select__icon{position:absolute;top:0;right:0;bottom:0;width:30px;text-align:center;border-radius:4px;background-color:transparent;margin-right:0;transform:scale(1.2,.7)}
    .city-iconfont-arrowdown:before{content:"∨";font-size:16px}
    .city-select__option{position:absolute;top:30px;left:-1px;right:0;display:block; z-index: 1;}
    .city-select .pop-wrapper .city{position:absolute;top:0;left:0;width:200px;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#fff;border:solid 1px #bfbfbf}
    .city-select .pop-wrapper .city>.index{position:absolute;top:0;left:0;width:28px;height:100%;line-height:20px;text-align:center;background-color:#f8f8f8;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;padding:5px 0;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:flex-start;}
    .city-select .pop-wrapper .city>.index li{cursor:pointer}
    .city-select .pop-wrapper .city>.index li.active,.city-select .pop-wrapper .city>.index li:hover{color:#fff;background-color:#4198ca}
    .city-select__option dl{max-height:475px;overflow-x:hidden;overflow-y:auto}
    .city-select .pop-wrapper .city>.listcity{margin-left:28px;border-left:solid 1px #bfbfbf}
    .city-select__option dd,.city-select__option dt{line-height:30px;padding-left:20px;padding-right:10px;border-bottom:solid 1px #e5e5e5}
    .city-select__option dt{color:#4198ca;font-weight:700;background-color:#ebf0fb}
    .city-select__option dd{cursor:pointer}
    .city-select__option dd.active,.city-select__option dd:hover{color:#fff;background-color:#4198ca}
    .city-select .pop-wrapper .series{display:none;position:absolute;top:0;left:150px;width:200px;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#fff;border:solid 1px #bfbfbf}
    .city-select__option dl{height:550px;max-height:550px;overflow-x:hidden;overflow-y:auto}
</style>

HTML代碼

<div class="city-select_box" id="js-carpicker-city1">
    <div class="city-select active"  >
        <div class="city-select__selected" data-select-picker="">
            <span class="city-select__text" data-select-value=""> <{if $params.city_name}><{$params.city_name}> <{else}>請選擇城市 <{/if}></span>
            <span class="city-select__icon">
                <i class="city-iconfont city-iconfont-arrowdown"></i>
            </span>
        </div>
        <{if $city_list_info}>
        <div class="city-select__option" data-select-dropdown=""  id='city_idTwo'  style="display:none;">
            <div class="pop-wrapper">
                <div class="city" data-select-city="" >
                    <ol class="index">
                        <{foreach from=$city_list_info item=city key=k}> 
                            <li onclick="city_zm(this)"  id='licity_<{$k}>'><{$k}></li>
                        <{/foreach}>
                    </ol>
                    <dl class="listcity" >
                       <{foreach from=$city_list_info item=city key=k}>  
                       <dt class='list_childcity' id="jumpc_<{$k}>" ><{$k}></dt>
                            <{foreach from=$city item=citys }> 
                            <dd class='city_xz <{if $params.city_id == $citys.city_id}>active<{/if}>' data='licity_<{$k}>'  onclick="city_xz(<{$citys.city_id}>,this)"  id="hide_city_id_<{$citys.city_id}>" datas="<{$citys.city_id}>" ><{$citys.city_name}></dd>
                            <{/foreach}>
                    <{/foreach}>
                    </dl>
                </div>
            </div>
        </div>
        <{/if}>
        
		<!-- 這兩參數用於處理後臺 form表單接收到的參數 -->
        <input id="hide_city" type="hidden" value="<{$params.city_id}>" name="city_id" />
        <input id="hide_cityname" type="hidden" value="<{$params.city_name}>" name="city_name" />
    </div>
</div>

JQ

<script type="text/javascript">
	//大概是點擊出來下拉菜單 根據選中的城市 賦值到框內用於展示
    $('.city-select__selected').click(function(){
        if($('#city_idTwo').is(':hidden') == false){
            $('#city_idTwo').hide();
        }else{
            $('#city_idTwo').show();
            var hide_city = $('#hide_city').val();
            var list_child = $('.list_childcity');
            for(var i=0;i<list_child.length;i++){
                var key = list_child[i].id;
                Top = $('#'+key).position().top;
                var data_top = $('#'+key).attr('data');
                if(!data_top){
                    $('#'+key).attr('data',Top);
                }
            }
            if(hide_city > 0){
                var jump_id = $('#hide_city_id_'+hide_city).attr('data');
                city_zm($('#'+jump_id));
                $('#hide_city_id_'+hide_city).addClass('active');
            }
        }
    })
    // 就是選中的效果 錨點處理
    function city_zm(_this){
        var zm = $(_this).html();
        $(_this).addClass('active'); 
        $(_this).siblings().removeClass("active");
        var zm_Top = $('#jumpc_'+zm).attr('data');
        $('.listcity').animate({
            scrollTop: zm_Top+"px"
        }, 0);
        
    }
    //選中的城市 加class爲 active
    function city_xz(city_id,_this){
        $(_this).addClass("active")
        $(_this).siblings().removeClass("active");
        $('#city_idTwo').hide();
        var city_name = $(_this).html();
        //賦值參數 
        $('#hide_city').val(city_id);
        $('#hide_cityname').val(city_name);
        $('.city-select__text').html(city_name);
        
    }
</script>

注：在HTML代碼中，有一個處理查詢過後依舊選中狀態，根據參數params的city_id做處理，
然後城市名字過長或者有其他字母以及加減乘除字符，會有問題 那麼代碼重新處理
不用給後臺傳city_name這個參數 就想到了一個新jq來控制
其實文本顯示行 最省勁省時的方法就是，給後臺傳一個名字接收到就可以了
底下 選中和文本顯示是兩回事
選中處理：

 $(function(){
 	  //頁面加載完成後 遍歷所有dd標籤拿出選中的active的text()
      $(".listcity").children('dd').each(function () {
          if ($(this).hasClass('active')) {
              $('.city-select__text').text($(this).text());
          }
        });
    })

這個有個弊端就是點擊空白處下拉部分不會收起 這裏還得jq單獨處理畢竟不是內置select框

window.onclick = funtion(event){
	var e = event || window.event;
	//打印一下classname 看一下空白處class名是多少根據名稱 判斷 隱藏他！
	console.log(e.arget.className);
	if(e.target.className == 'rt_content' || e.target.className == 'rt_wrap content'){
          $(".city-select__option").hide();
     }
}