Implémenter une liaison de zone de sélection basée sur layui

Pour obtenir l'effet de liaison, faites attention à deux points :

Premièrement, vous devez être capable de surveiller l'événement de changement de la sélection

Deuxièmement, le contenu chargé de manière asynchrone, il doit être restitué avant de pouvoir être utilisé normalement.

Structure HTML :

<div class="x-body">
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">选择地区</label>
            <div class="layui-input-inline">
                <select name="province" lay-filter="province" id="s_p">
                    <option value="1">请选择省</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" lay-filter="city" id="s_c">
                    <option value="1">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" lay-filter="area" id="s_x">
                    <option value="1">请选择区/县</option>
                </select>
            </div>
        </div>
        <div>
            <label class="layui-form-label">选择地区</label>
            <div class="layui-input-inline">
                <select name="towns" lay-filter="towns" id="s_t">
                    <option value="1">请选择乡镇/街道</option>
                </select>
            </div>
            <!--<div class="layui-input-inline">-->
                <!--<select name="burg" lay-filter="burg" id="s_b">-->
                    <!--<option value="1">庄/村</option>-->
                <!--</select>-->
            <!--</div>-->
        </div>
    </form>
</div>

js :

<script type="text/javascript">

    layui.use([&#39;form&#39;, &#39;layer&#39;, &#39;laytpl&#39;, &#39;jquery&#39;], function () {
        var form = layui.form
            , $ = layui.jquery;

        var parentId = &#39;0&#39;;
        $(function () {
            $.post(serverPath + "sys/area/backProvince/" + parentId, function (result) {
                var p = result;
                for (v in p) {
                    var pp = p[v].id;
                    $("#s_p").append("<option value=" + pp + ">" + p[v].fullname + "</option>")
                }
                form.render();
            })

            form.on(&#39;select(province)&#39;, function (data) {
                var p = $("#s_p").val();
                if (p != "1") {
                    $.post(serverPath + "sys/area/backProvince/" + p, function (result) {
                        var c = result;
                        $("#s_c").html("");
                        $("#s_c").append("<option value=&#39;1&#39;>请选择市</option>");
                        $("#s_x").html("");
                        $("#s_x").append("<option value=&#39;1&#39;>请选择县/区</option>");
                        $("#s_t").html("");
                        $("#s_t").append("<option value=&#39;1&#39;>请选择乡镇/街道</option>");
                        $("#s_b").html("");
                        $("#s_b").append("<option value=&#39;1&#39;>请选择村/街道号</option>");
                        for (v in c) {
                            var cc = c[v].id;
                            $("#s_c").append("<option value=" + cc + ">" + c[v].fullname + "</option>")
                        }
                        form.render();
                    })
                }
            });
            form.on(&#39;select(city)&#39;, function (data) {
                var c = $("#s_c").val();
                if (c != "1") {
                    $.post(serverPath + "sys/area/backProvince/" + c, function (result) {
                        var x = result;
                        $("#s_x").html("");
                        $("#s_x").append("<option value=&#39;1&#39;>请选择县/区</option>");
                        $("#s_t").html("");
                        $("#s_t").append("<option value=&#39;1&#39;>请选择乡镇/街道</option>");
                        $("#s_b").html("");
                        $("#s_b").append("<option value=&#39;1&#39;>请选择村/街道号</option>");
                        for (v in x) {
                            var xx = x[v].id;

                            $("#s_x").append("<option value=" + xx + ">" + x[v].fullname + "</option>")
                        }
                        form.render();
                    });
                }
            });
            form.on(&#39;select(area)&#39;, function (data) {
                var x = $("#s_x").val();
                if (x != "1") {
                    $.post(serverPath + &#39;sys/area/backProvince/&#39;+ x, function (result) {
                        var t = result;
                        $("#s_t").html("");
                        $("#s_t").append("<option value=&#39;1&#39;>请选择乡镇/街道</option>");
                        $("#s_b").html("");
                        $("#s_b").append("<option value=&#39;1&#39;>请选择村/街道号</option>");
                        for (v in t) {
                            var xx = t[v].id;
                            $("#s_t").append("<option value=" + xx + ">" + t[v].fullname + "</option>")
                        }
                        form.render();
                    });
                }
            });


        });
    });


</script>

Résumé :

1. L'événement d'écoute chage de Select utilise le formulaire

. .on('select(myselect)', function(data){}) où myselect est la valeur de l'attribut lay-filter de select

2 Une fois les données chargées de manière asynchrone dans l'option de sélection, cliquez sur. le select will On constate que l'effet de sélection de layui ne fonctionne pas. Vous devez utiliser form.render('select');

Pour plus de connaissances

layui, veuillez faire attention à la colonne du didacticiel layui sur le site Web PHP chinois

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!