本来要使用微信的jqueryweui picker插件。因为一些限制。
百度了一下午，看到了mobiscroll。 因为新版是收费的，所以这里用 2.13.2版本
首先看一下效果实现后的
1、引入mobiscroll文件
<link rel="stylesheet" href="../resources/plugins/mobiscroll/mobiscroll-2.13.2.full.min.css" />
<script type="text/javascript" src="../resources/plugins/mobiscroll/mobiscroll-2.13.2.full.min.js"></script>
2、准备data.js 数据（这里从数据库读取出来，转成的JSON）
数据格式如下：
[
{
"code": "110000",
"name": "北京市",
"sub": [
{
"code": "110100",
"name": "市辖区",
"sub": [
{
"code": "110101",
"name": "东城区"
},
{
"code": "110102",
"name": "西城区"
},
{
"code": "110105",
"name": "朝阳区"
},
{
"code": "110106",
"name": "丰台区"
},
{
"code": "110107",
"name": "石景山区"
},
{
"code": "110108",
"name": "海淀区"
},
{
"code": "110109",
"name": "门头沟区"
},
{
"code": "110111",
"name": "房山区"
},
{
"code": "110112",
"name": "通州区"
},
{
"code": "110113",
"name": "顺义区"
},
{
"code": "110114",
"name": "昌平区"
},
{
"code": "110115",
"name": "大兴区"
},
{
"code": "110116",
"name": "怀柔区"
},
{
"code": "110117",
"name": "平谷区"
}
]
},
{
"code": "110200",
"name": "县",
"sub": [
{
"code": "110228",
"name": "密云县"
},
{
"code": "110229",
"name": "延庆县"
}
]
}
]
},
{
"code": "120000",
"name": "天津市",
"sub": [
{
"code": "120100",
"name": "市辖区",
"sub": [
{
"code": "120101",
"name": "和平区"
},
{
"code": "120102",
"name": "河东区"
},
{
"code": "120103",
"name": "河西区"
},
{
"code": "120104",
"name": "南开区"
},
{
"code": "120105",
"name": "河北区"
},
{
"code": "120106",
"name": "红桥区"
},
{
"code": "120110",
"name": "东丽区"
},
{
"code": "120111",
"name": "西青区"
},
{
"code": "120112",
"name": "津南区"
},
{
"code": "120113",
"name": "北辰区"
},
{
"code": "120114",
"name": "武清区"
},
{
"code": "120115",
"name": "宝坻区"
},
{
"code": "120116",
"name": "滨海新区"
},
{
"code": "120117",
"name": "宁河区"
},
{
"code": "120118",
"name": "静海区"
}
]
},
{
"code": "120200",
"name": "县",
"sub": [
{
"code": "120225",
"name": "蓟县"
}
]
}
]
},3、html代码
<input type="hidden" id="provinceId" name="provinceId" value="$!compShopInfo.provinceId" >
<input type="hidden" id="cityId" name="cityId" value="$!compShopInfo.cityId">
<input type="hidden" id="areaId" name="areaId" value="$!compShopInfo.areaId">
<input class="weui-input" type="text" placeholder="请填写" id="Addr" >
<ul id="AddrMobiscroll" style="display: none"></ul>
3个隐藏域用于保存一会要提交到后端的值 （$! 是velocity表达式，没用过的小伙伴请忽略。设置默认值的）
Addr用于点击弹出弹层
AddrMobiscroll 就是级联的弹层，稍后用JS读取JSON进行装载
4、JS代码
使用 veloctiy 进行初始化 用于 update进入表单时的数据回填
var ProvinceId = '$!compShopInfo.provinceId';
var CityId = "$!compShopInfo.cityId";
var AreaId = "$!compShopInfo.areaId";
//初始化经营地址
function initAddrJsons(){
//初始化选中的值 - 》 回显示文本框
var ProvinceIdStr = "";
var CityIdStr = "";
var AreaIdStr = "";
//初始化插件默认选中
var ProvinceIdIndex = "";
var CityIdIndex = "";
var AreaIdIndex = "";
//初始化选中隐藏的value -》 提交时使用
var ProvinceIdVal = "";
var CityIdVal = "";
var AreaIdVal = "";
var KHHtml = "";
//省份
for(var i = 0; i < addrCode.length; i++){
var code = addrCode[i].code;
var name = addrCode[i].name;
//初始化选中值
if(ProvinceId == code){
ProvinceIdStr = name;
ProvinceIdIndex = i;
ProvinceIdVal = code;
}
KHHtml +="<li>";
KHHtml +='<div data-value="'+ code +'">'+ name +'</div>';
KHHtml +='<ul>';
//城市
for(var j = 0; j < addrCode[i].sub.length; j++) {
var subCode = addrCode[i].sub[j].code;
var subName = addrCode[i].sub[j].name;
//初始化选中值
if(CityId == subCode){
CityIdStr = subName;
CityIdIndex= j;
CityIdVal = subCode;
}
KHHtml +='<li>';
KHHtml +='<div data-value="'+ subCode +'">'+ subName +'</div>';
KHHtml +='<ul>';
//区
for(var k = 0; k < addrCode[i].sub[j].sub.length; k++) {
var subSubCode = addrCode[i].sub[j].sub[k].code;
var subSubName = addrCode[i].sub[j].sub[k].name;
//初始化选中值
if(AreaId == subSubCode){
AreaIdStr = subSubName;
AreaIdIndex= k;
AreaIdVal = subSubCode;
}
KHHtml +='<li data-value="'+ subSubCode +'">'+ subSubName +'</li>';
}
KHHtml +='</ul>';
KHHtml += '</li>';
}
KHHtml +='</ul>';
KHHtml +='</li>';
}
if(ProvinceIdStr == "" && CityIdStr == "" && AreaIdStr == "" ){
ProvinceIdStr = addrCode[0].name;
CityIdStr = addrCode[0].sub[0].name;
AreaIdStr = addrCode[0].sub[0].sub[0].name;
ProvinceIdIndex = 0;
CityIdIndex = 0;
AreaIdIndex = 0;
ProvinceIdVal = addrCode[0].code;
CityIdVal = addrCode[0].sub[0].code;
AreaIdVal = addrCode[0].sub[0].sub[0].code;
}
//初始化选中值
$("#Addr").val(ProvinceIdStr + " " + CityIdStr + " " + AreaIdStr);
$("#provinceId").val(ProvinceIdVal);
$("#cityId").val(CityIdVal);
$("#areaId").val(AreaIdVal);
//初始化插件所需html
$("#AddrMobiscroll").append(KHHtml);
//初始化插件
$("#AddrMobiscroll").mobiscroll().treelist({
theme: "ios-ics",
lang: "zh",
display: 'bottom',
inputClass: 'tmp',
headerText: '请您选择',
defaultValue: [ProvinceIdIndex,CityIdIndex,AreaIdIndex],
onSelect: function (valueText, inst) {
// console.log("1--"+valueText);
var n = valueText.split(' ');
var m1 = $(this).children("li").eq(n[0]).find("div").html();
var m1_id = $(this).children("li").eq(n[0]).find("div").attr("data-value");
var m2 = $(this).children("li").eq(n[0]).children("ul").find("div").eq(n[1]).html();
var m2_id = $(this).children("li").eq(n[0]).children("ul").find("div").eq(n[1]).attr("data-value");
var m3 =$(this).children("li").eq(n[0]).children("ul").children("li").eq(n[1]).children("ul").children("li").eq(n[2]).html();
var m3_id = $(this).children("li").eq(n[0]).children("ul").children("li").eq(n[1]).children("ul").children("li").eq(n[2]).attr("data-value");
// console.log("1-name-"+m1);
// console.log("2-name-"+m2);
// console.log("3-name-"+m3);
//
// console.log("1-val-"+m1_id);
// console.log("2-val-"+m2_id);
// console.log("3-val-"+m3_id);
//选中后进行赋值
$("#Addr").val(m1 + " " + m2 + " " + m3);
$("#provinceId").val(m1_id);
$("#cityId").val(m2_id);
$("#areaId").val(m3_id);
}
});
//隐藏插件自己生成的文本框
$("#AddrMobiscroll_dummy").css('display','none');
//初始化点击事件
$("#Addr").click(function () {
$("input[id^=AddrMobiscroll]").click();
});
}
5、使用JQ初始化一下就可以啦
jQuery(function () {
//初始化经营地址级联插件
initAddrJsons();
});
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
