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: [{}] ???})jquery weui做的三级联动
原文地址：https://www.cnblogs.com/mr-hu2009/p/10048608.html