<aside class="adr-text">
<p class="clear choice">
请选择地区<span class="fr cancle">取消</span>
</p>
<ul class="clear adr-list">
<li class="fl choose">请选择</li>
</ul>
<div class="adr-box pro-box" style="display: block;">
<p>北京</p>
<p>河北</p>
<p>内蒙古</p>
<p>浙江</p>
<p>辽宁</p>
<p>北京</p>
<p>河北</p>
<p>山西</p>
<p>浙江</p>
<p>辽宁</p>
</div>
<div class="adr-box city-box">
</div>
<div class="adr-box area-box">
</div>
</aside>
css样式
.adr-text{
background: white;
position: absolute;
top: 45%;
height: 55%;
width: 100%;
}
.mask .choice{
text-align: center;
color: #666666;
font-size: 1.2rem;
padding: .8rem 0rem;
border-bottom: 1px solid #DDDDDD ;
}
.mask .cancle{
margin-right: 1rem;
}
.mask .adr-list{
font-size: 1rem;
color: #666;
background:#F5F5F5 ;
}
.mask .adr-list li{
padding: 0.8rem;
}
.mask li.choose{
padding-left:0px ;
margin-left: 0.8rem;
color: #F35656;
border-bottom: 2px solid #F35656;
}
.mask .adr-box{
display: none;
height: 80%;
overflow-y: scroll;
}
.mask .adr-box p {
color: #666;
font-size: 1.2rem;
width: 100%;
padding: 0.8rem 0.8rem;
}
.mask .adr-box p:last-child{
margin-bottom: 2rem;
}
js代码
var li = $(".adr-list");//动态添加选中的省市区
var cityBox= $(".city-box"),
proBox = $(".pro-box"),
areaBox = $(".area-box"),
areaText ;
var idnexP , indexC;
var pushText = [];//选择的具体地址
//声明市
var cities = [
["宣武区" , "丰台区" ,"石景山区"],
["廊坊市", "石家庄市"],
["呼和浩特","包头市"]
];
//声明区
var areas = [
[
["内环到三环里"],
["四环到五环之间","二环到三环","三环到四环之间"],
["龙泉镇","荣丁镇","大台镇"]
],
[
["三河市","广阳区"],
["新华区","桥西区"]
],
[
["玉泉区","武川县"],
["固阳县","东河区"]
]
];
/*如果超出7个汉字就隐藏……*/
$(".adr-list li").each(function(){
var length = $(this).html().length;
var text = $(this).html();
if(length > 7){
var value = text.substring(0,7)
$(this).html(value+"...");
}
});
//省和自治区和直辖市被点击时候代码
$(".pro-box p").click(function(){
indexP = $(this).index();
var text = $(this).html();
if($(".adr-list li").length == 2){
$(".adr-list li").eq("1").addClass("choose");
$(".adr-list li").eq("0").remove();
}else if($(".adr-list li").length > 2){
li.empty();
var choose = "<li class='fl choose'>"+"请选择"+"</li>"
li.append(choose);
}
var html = "<li class='fl'>"+text+"</li>"
li.prepend(html);
proBox.hide();
showCity();
});
function showCity(){
cityBox.show();
cityBox.empty();
var cityEle = cities[indexP];
for(var i = 0 ; i < cityEle.length ; i++){
var text = cityEle[i];
var html = "<p>"+text+"</p>"
cityBox.append(html);//动态添加选择对应省下面的市
}
}
$(".adr-list").delegate("li","click",function(){
var index = $(this).index();
$(this).addClass("choose").siblings().removeClass("choose");
$(".adr-box").hide();
$(".adr-box").eq(index).show();
showColor();
});
function showColor(){
$(".pro-box p").css("color","#666");
$(".pro-box p").eq(indexP).css("color","#F35656");
}//被选中的省或者是直辖市或是自治区样式
$(".city-box").delegate("p",'click',function(){
var liLength = li.find("li").length;
indexC = $(this).index();
var text = $(this).html();
if(liLength > 2){
li.find("li").eq("1").html(text).removeClass("choose");
li.find("li").eq("2").addClass("choose");
}else{
var html = "<li class='fl'>"+text+"</li>"
var length = li.find("li").length-1;
li.find("li").eq(length).before(html);
}
proBox.hide();
cityBox.hide();
showArea();
});
function showArea(){
areaBox.show();
areaBox.empty();
var areaEle = areas[indexP][indexC];
for(var i = 0 ; i < areaEle.length ; i++){
var text = areaEle[i];
var html = "<p>"+text+"</p>"
areaBox.append(html);//动态添加选择对应省下面的市
}
}
$(".area-box").delegate("p","click",function(){
areaText = $(this).html();
adrText();
});
function adrText(){
pushText.length = 0;
li.find("li").each(function(e){
if($(this).hasClass("choose")){
}else{
var text = $(this).html();
pushText.push(text);
}
});
var addrText = pushText.join("") + areaText;
$("#adr").val(addrText);
$(".mask").hide();
}
$(".cancle").click(function(){
$(".mask").hide();
})
$(".adr-p").click(function(){
$("#adr").val(" ");
$(".mask").show();
var length = li.find("li").length;
if(length > 1){
li.empty();
var choose = "<li class='fl choose'>"+"请选择"+"</li>"
li.append(choose);
}
$(".pro-box").show();
$(".area-box").hide();
})
这个效果类似于京东app的地址选择,用纯js实现,省份和城市还有区县等从数据获取,这只是模拟
delegate解决绑定click事件和省份地址连级
最新推荐文章于 2023-02-10 17:47:03 发布