zoukankan      html  css  js  c++  java
  • layui省市区下拉菜单三级联动

      使用这个功能需要用到layui这个文件夹的内容,所以不能只把layui.csslayui.js引入,要从layui文件夹获取

      显示效果

      

      代码部分

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>layarea</title>
        <link rel="stylesheet" href="./layui/css/layui.css">
    </head>
    
    <body>
        <div class="layui-form">
            <div class="layui-form-item" id="area-picker">
                <div class="layui-form-label">地址</div>
                <div class="layui-input-inline" style=" 200px;">
                    <select name="province" class="province-selector" data-value="广东省" lay-filter="province-1">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline" style=" 200px;">
                    <select name="city" class="city-selector" data-value="深圳市" lay-filter="city-1">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style=" 200px;">
                    <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                        <option value="">请选择区</option>
                    </select>
                </div>
            </div>
        </div>
        <script src="./layui/layui.js"></script>
        <script>
            //配置插件目录
            layui.config({
                base: './mods/'
                , version: '1.0'
            });
            //一般直接写在一个js文件中
            layui.use(['layer', 'form', 'layarea'], function () {
                var layer = layui.layer
                    , form = layui.form
                    , layarea = layui.layarea;
    
                layarea.render({
                    elem: '#area-picker',
                    change: function (res) {
                        //选择结果
                        console.log(res);
                    }
                });
            });
        </script>
    </body>
    
    </html>
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    安裝Node.js
    es match、match_phrase、query_string和term的区别
    ES系列十、ES常用查询API
    ElasticSearch 入门总结
    起立,老师好
    像哆啦A梦懂大雄一样懂客户,我们也会拥有百宝箱
    阿里云居然在偷偷发福利!
    别人家的公司又来了,这次竟然开起了演唱会
    听说国家博物馆收藏了一行代码 ???
    我还是那个我,为啥就被老板区别对待了呢?
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11456916.html
Copyright © 2011-2022 走看看