103 lines
4.4 KiB
HTML
103 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>省市县区选择区</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
|
|
<link rel="stylesheet" href="../css/public.css" media="all">
|
|
<link rel="stylesheet" href="../js/lay-module/step-lay/step.css" media="all">
|
|
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
|
|
<script src="../js/framework-ui.js"></script>
|
|
<script src="../lib/layui/layui.js" charset="utf-8"></script>
|
|
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
|
|
</head>
|
|
<body>
|
|
<div class="layuimini-container">
|
|
<div class="layuimini-main">
|
|
|
|
<form class="layui-form" action="" lay-filter="areapicker" style="padding:20px;">
|
|
<div class="layui-form-item" id="area-picker">
|
|
<div class="layui-form-label">选择地区</div>
|
|
<div class="layui-input-inline" style="width: 200px;">
|
|
<select id="provid" name="provid" lay-filter="provid" lay-verify="required" lay-search>
|
|
<option value="">请选择省</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline" style="width: 200px;">
|
|
<select id="cityid" name="cityid" lay-filter="cityid" lay-verify="required" lay-search>
|
|
<option value="">请选择市</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-input-inline" style="width: 200px;">
|
|
<select id="areaid" name="areaid" lay-filter="areaid" lay-verify="required" lay-search>
|
|
<option value="">请选择区</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
layui.use(['jquery', 'form', 'common'], function () {
|
|
var form = layui.form,
|
|
$ = layui.$,
|
|
common = layui.common;
|
|
|
|
$(function () {
|
|
//设置省份数据
|
|
$("#provid").bindSelect({
|
|
id: "F_Id",
|
|
text: "F_FullName",
|
|
url: "/SystemManage/Area/GetSelectJson?keyValue=0",
|
|
});
|
|
$("#provid").val("120000000000");
|
|
ProvidChange("120000000000");
|
|
$("#cityid").val("120100000000");
|
|
CityChange("120100000000");
|
|
$("#areaid").val("120103000000");
|
|
form.render();//刷新select选择框渲染
|
|
});
|
|
//加载市数据
|
|
form.on('select(provid)', function (data) {
|
|
var provid = data.value;
|
|
ProvidChange(provid);
|
|
form.render();//刷新select选择框渲染
|
|
});
|
|
function ProvidChange(value) {
|
|
$("#cityid").empty();//清空
|
|
$("#cityid").append($("<option></option>").val("").html("请选择市"));
|
|
$("#areaid").empty();//清空
|
|
$("#areaid").append($("<option></option>").val("").html("请选择区"));
|
|
//alert(areaId);
|
|
$("#cityid").bindSelect({
|
|
id: "F_Id",
|
|
text: "F_FullName",
|
|
url: "/SystemManage/Area/GetSelectJson?keyValue=" + value,
|
|
});
|
|
$("#cityid").val(null);
|
|
$("#areaid").val(null);
|
|
}
|
|
//加载区数据
|
|
form.on('select(cityid)', function (data) {
|
|
var cityid = data.value;
|
|
CityChange(cityid)
|
|
form.render();//刷新select选择框渲染
|
|
});
|
|
function CityChange(value) {
|
|
$("#areaid").empty();//清空
|
|
$("#areaid").append($("<option></option>").val("").html("请选择区"));
|
|
//alert(areaId);
|
|
$("#areaid").bindSelect({
|
|
id: "F_Id",
|
|
text: "F_FullName",
|
|
url: "/SystemManage/Area/GetSelectJson?keyValue=" + value,
|
|
});
|
|
$("#areaid").val(null);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |