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>
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    UDP的坏处
    进程控制块(Process Control Block, PCB)
    分布式中一些关键概念的解释
    线程池的设计实现
    [原创] 同步、异步、阻塞、非阻塞详解
    常用场景对文件状态的影响
    echo使用说明,参数详解
    Linux下源码安装ffmpeg及ffmpeg的简单使用说明
    127.0.0.1、0.0.0.0和本机IP地址的区别和使用
    链路层的简介和MTU
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11456916.html
Copyright © 2011-2022 走看看