先看一下 效果图
点击左侧字母,右边根据锚点切换到对应位置
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();
}
}