PHP
<!--
$user = $this->auth->getUser();
$province = $this->request->post('province');
$city = $this->request->post('city');
$area = $this->request->post('area');
$user->city = "{$province}/{$city}/{$area}";
$user->save();
$this->success("保存成功！");
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fastadmin cxselect使用后台city-picker的插件实现前台的地区联动 多级联动</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/assets/libs/fastadmin-cxselect/js/jquery.cxselect.js"></script>
<script type="text/javascript" src="/assets/libs/fastadmin-citypicker/dist/js/city-picker.data.js"></script>
</head>
<body>
{assign name="city" value=":explode('/',$user.city)" /}
<span data-toggle="cxselect" data-selects="province,city,area">
<select name="province" class="province">
{if(!empty($city[0]))}<option value="{$city[0]}" selected="">{$city[0]}</option>{/if}
</select>
<select name="city" class="city">
{if(!empty($city[1]))}<option value="{$city[1]}" selected="">{$city[1]}</option>{/if}
</select>
<select name="area" class="area" >
{if(!empty($city[2]))}<option value="{$city[2]}" selected="">{$city[2]}</option>{/if}
</select>
</span>
<script>
var cxcitydata=[]
for (const key in ChineseDistricts["86"]) {
cxcitydata = cxcitydata.concat(ChineseDistricts["86"][key]);
}
cxcitydata.sort((a, b) => {
return a.code.localeCompare(b.code);
});
for (const key in cxcitydata) {
cxcitydata[key].name=cxcitydata[key].address;
delete cxcitydata[key].address;
if (ChineseDistricts[cxcitydata[key]['code']] !== undefined) {
cxcitydata[key].children=AToB(ChineseDistricts[cxcitydata[key]['code']]);
for (const key2 in cxcitydata[key].children) {
if (ChineseDistricts[cxcitydata[key].children[key2]['code']] !== undefined) {
cxcitydata[key].children[key2].children=AToB(ChineseDistricts[cxcitydata[key].children[key2]['code']]);
}
}
}
}
function AToB(arr){
var newarr=[];
for (const key in arr) {
newarr.push({
code:key,
name:arr[key]
});
}
return newarr;
}
if($("[data-toggle='cxselect']").length > 0) {
$("[data-toggle='cxselect']").cxSelect({
data: cxcitydata,
selects: ['province', 'city', 'area'], // selects 为数组形式，请注意顺序
emptyStyle: 'none',
jsonSub: "children",
jsonName: "name",
jsonValue: "name",
});
}
//多级联动end
</script>
</body>
</html>
发表评论 取消回复