zoukankan html css js c++ java

jquery weui做的三级联动

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=" 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: [{}]
    })

查看全文

相关阅读:
Ajax Bootstrap JSP .jsp JS .js DOM 概念
 CSS相关
 linux下python的tab自动补全功能:readline模块和ipython的安装
 python小技巧
 python中的值传递和引用传递(可变对象与不可变对象)也就是赋值的原理-python全部是引用传递
 Sql server 编写99乘法表
 消息对话框 MessageBoxButtons
union与union all的用法给区别
 主要的窗体控件的概述
 窗体的常用方法和事件

原文地址：https://www.cnblogs.com/mr-hu2009/p/10048608.html