基于layui的三级联动模块

来源：互联网发布：游族网络和游族影业编辑：程序博客网时间：2024/05/12 14:30

1.html的页面代码如下：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="../../../layui-v2.1.5/css/layui.css" /></head><body><div class="layui-form"><div class="layui-input-inline"><select name="province" lay-filter="province" class="province"><option value="">请选择省</option></select></div><div class="layui-input-inline"><select name="city" lay-filter="city" disabled><option value="">请选择市</option></select></div><div class="layui-input-inline"><select name="area" lay-filter="area" disabled><option value="">请选择县/区</option></select></div></div></body><script type="text/javascript" src="../../../layui-v2.1.5/layui.js"></script><script type="text/javascript" src="address.js"></script><script type="text/javascript">layui.config({base : "../../../js/" //address.js的路径}).use([ 'layer', 'jquery', "address" ], function() {var layer = layui.layer, $ = layui.jquery, address = layui.address();});</script><html>

2.address.js的代码入下：

ps:需要注意的有：$.get("address.json", function (data) {} 的地址为json地址，地址不对会报异常。layui.define(["form","jquery"],function(exports){    var form = layui.form,    $ = layui.jquery,    Address = function(){};    Address.prototype.provinces = function() {        //加载省数据        var proHtml = '',that = this;        $.get("address.json", function (data) {            for (var i = 0; i < data.length; i++) {                proHtml += '<option value="' + data[i].code + '">' + data[i].name + '</option>';            }            //初始化省数据            $("select[name=province]").append(proHtml);            form.render();            form.on('select(province)', function (proData) {                $("select[name=area]").html('<option value="">请选择县/区</option>');                var value = proData.value;                if (value > 0) {                    that.citys(data[$(this).index() - 1].childs);                } else {                    $("select[name=city]").attr("disabled", "disabled");                }            });        })    }    //加载市数据    Address.prototype.citys = function(citys) {        var cityHtml = '<option value="">请选择市</option>',that = this;        for (var i = 0; i < citys.length; i++) {            cityHtml += '<option value="' + citys[i].code + '">' + citys[i].name + '</option>';        }        $("select[name=city]").html(cityHtml).removeAttr("disabled");        form.render();        form.on('select(city)', function (cityData) {            var value = cityData.value;            if (value > 0) {                that.areas(citys[$(this).index() - 1].childs);            } else {                $("select[name=area]").attr("disabled", "disabled");            }        });    }    //加载县/区数据    Address.prototype.areas = function(areas) {        var areaHtml = '<option value="">请选择县/区</option>';        for (var i = 0; i < areas.length; i++) {            areaHtml += '<option value="' + areas[i].code + '">' + areas[i].name + '</option>';        }        $("select[name=area]").html(areaHtml).removeAttr("disabled");        form.render();    }    var address = new Address();    exports("address",function(){        address.provinces();    });});

3.address.json的下载地址如下：

一、下载地址
二、下载地址

原文转载地址：地址

阅读全文

0 0