layui による 3 レベルリンケージの実装方法: 最初に HTML ページを作成し、次にコンテンツ「Address.prototype.provinces = function(){...}」を含む [address.js] ファイルを作成します。そして最後に合格 lauiui モジュールは 3 レベルのリンケージを実装できます。

Lauiui で 3 レベルのリンクを実装する方法

このチュートリアルの動作環境: Windows 10 システム、layui バージョン 2.5.6、Dell G3 コンピューター。

layui ベースの 3 層連携モジュール

html のページコードは次のとおりです。

ログイン後にコピー

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 += ''; } //初始化省数据 $("select[name=province]").append(proHtml); form.render(); form.on('select(province)', function (proData) { $("select[name=area]").html(''); 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 = '',that = this; for (var i = 0; i < citys.length; i++) { cityHtml += ''; } $("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 = ''; for (var i = 0; i < areas.length; i++) { areaHtml += ''; } $("select[name=area]").html(areaHtml).removeAttr("disabled"); form.render(); } var address = new Address(); exports("address",function(){ address.provinces(); }); });

ログイン後にコピー