标签:class ESS || ati att region false css sel
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: [{}]
})
标签:class ESS || ati att region false css sel
原文地址:https://www.cnblogs.com/mr-hu2009/p/10048608.html