Implementieren Sie die Verknüpfung ausgewählter Bereiche basierend auf Laui

Um den Verknüpfungseffekt zu erzielen, achten Sie auf zwei Punkte:

Erstens müssen Sie in der Lage sein, das Änderungsereignis der Auswahl zu überwachen

Zweitens asynchron geladener Inhalt. Er muss erneut gerendert werden, bevor er normal verwendet werden kann.

Html-Struktur:

<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>

Zusammenfassung:

1. Das Chage-Listening-Ereignis von Select verwendet die Form

.on('select(myselect)', function(data){}) wobei myselect der Lay-Filter-Attributwert von select ist

2 Nachdem die Daten asynchron in die Auswahloption geladen wurden, klicken Sie Es wurde festgestellt, dass der Auswahleffekt von Lauii nicht funktioniert. Sie müssen form.render('select') verwenden, um es erneut zu rendern, und es kann normal verwendet werden.

Weitere Laui-Kenntnisse finden Sie in der Laui-Tutorial-Kolumne auf der chinesischen PHP-Website

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Verknüpfung ausgewählter Bereiche basierend auf Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!