1.引入
<link rel="stylesheet" href="/static/mobile/css/weui.min.css"> <link rel="stylesheet" href="/static/mobile/css/jquery-weui.css"> <link rel="stylesheet" href="/static/mobile/css/style.css"> <script src="/static/mobile/js/jquery.js"></script> <script src="/static/mobile/js/jquery-weui.min.js"></script>
2.页面布局
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<%@ include file="../sales/head.jsp" %>
<link rel="stylesheet" href="/static/mobile/css/demos.css">
<script src="/static/layuiadmin/layui/layui.js" type="text/javascript"></script>
<style>
.toolbar .picker-button {
color: #04BE02;
}
</style>
</head>
<body ontouchstart>
<header class=‘demos-header‘>
<h1 class="demos-title">Select</h1>
</header>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">选择省份</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="province" type="text" value="">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">选择城市</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="city" type="text" value="">
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">选择县区</label></div>
<div class="weui-cell__bd">
<input class="weui-input" id="county" type="text" value="">
</div>
</div>
</div>
<a href="javascript:;" class="weui-btn weui-btn_primary" style="width: 95%;margin: 20px auto" onclick="submit()">完成</a>
</body>
</html>
3.js
<script>
$.post("/mobile/user/region/selectProvice", function (res) {
if (res== null||res==undefined||res.length<=0){
return false;
}
$("#province").select({
title: "选择省份",
items: res,
onChange: function () {
var provinceId = $("#province").attr("data-values");
$("#city").attr("data-values", "");
$("#city").attr("value", "");
$("#county").attr("data-values", "");
$("#county").attr("value", "");
if (provinceId==null||provinceId==undefined||provinceId.trim().length<=0){
return false;
}
$.post("/mobile/user/region/selectCity?provinceId=" + provinceId, function (res) {
if (res== null||res==undefined||res.length<=0){
return false;
}
$("#city").select("update", {items: res,onChange: function () {
var cityId= $("#city").attr("data-values");
$("#county").attr("data-values","");
$("#county").attr("value","");
$.post("/mobile/user/region/selectCounty?cityId=" + cityId, function (res) {
$("#county").select("update", {items: res});
})
}});
})
}
})
})
$("#city").select({
title: "选择城市",
items: [{}]
})
$("#county").select({
title: "选择县区",
items: [{}]
})
function submit() {
var regionId = $("#county").attr("data-values");
var regionName = $("#county").attr("value");
layui.sessionData(‘region‘, []);
layui.data(‘region‘, {
key: ‘regionId‘,
value: regionId
});
layui.data(‘region‘, {
key: ‘regionName‘,
value: regionName
});
location.href = "/mobile/user/index";
}
</script>
iteams不能动态变化，加入，用update这个属性就可以了。需要给input初始化（不然就会变成输入框）
$("#county").select("update", {items: res});
input初始化 ，若是iteams 为空的话，会报错
$("#city").select({
title: "选择城市",
items: [{}]
})
$("#county").select({
title: "选择县区",
items: [{}]
})
原文地址：https://www.cnblogs.com/mr-hu2009/p/10048608.html
时间： 2024-10-03 00:05:24