pHpthinkphp5+layui實(shí)現(xiàn)四級(jí)聯(lián)動(dòng)

  <div class="layui-form-item layui-form-pane">
        <label class="layui-form-label">城市聯(lián)動(dòng)</label>
        <div class="layui-input-inline" >
            <select name="province" lay-verify="required" lay-search="" lay-skin="select" lay-filter="province" >
                <option value="">請(qǐng)選擇省</option>
               <foreach name="arealist" item="v">
                   <option value="{$v.id}">{$v.area_name}</option>
               </foreach>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="city" lay-verify="required" lay-search="" lay-skin="select" lay-filter="city" id="city">
                <option value="">請(qǐng)選擇市/縣</option>
            </select>
        </div>
        <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="area" id="area">
                <option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>
            </select>
        </div>
            <div class="layui-input-inline" >
            <select name="area" lay-verify="required" lay-search=""lay-skin="select" lay-filter="street" id="street">
                <option value="">請(qǐng)選擇街道</option>
            </select>
        </div>
    </div>

html 部分

<script>
    layui.use(['form', 'layedit', 'laydate'],
    function() {
        var $ = layui.jquery,
        form = layui.form,
        layer = layui.layer,
        layedit = layui.layedit,
        laydate = layui.laydate;
 
        //監(jiān)聽省份選擇
        form.on('select(province)',
        function(data) {
            $('#city').html('<option value="">請(qǐng)選擇市/縣</option>');
            $('#area').html('<option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>');
            $('#street').html('<option value="">請(qǐng)選擇街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'pOST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#city").append(data1.option);
                        form.render('select'); //刷新select選擇框渲染
                    }
                }
            });
        });
        form.on('select(city)',
        function(data) {
            $('#area').html('<option value="">請(qǐng)選擇鎮(zhèn)區(qū)</option>');
            $('#street').html('<option value="">請(qǐng)選擇街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'pOST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#area").append(data1.option);
                        form.render('select'); //刷新select選擇框渲染
                    }
                }
            });
        });
        //監(jiān)聽省份選擇
        form.on('select(area)',
        function(data) {
            $('#street').html('<option value="">請(qǐng)選擇街道</option>');
            $.ajax({
                url: "{:U('Admin/getchildarea')}",
                data: {
                    parent_id: data.value
                },
                type: 'pOST',
                dataType: 'json',
                success: function(data1) {
                    if (data1.error == 0) {
                        $("#street").append(data1.option);
                        form.render('select'); //刷新select選擇框渲染
                    }
                }
            });
        });
 
        //監(jiān)聽提交
        form.on('submit(demo1)',
        function(data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最終的提交信息'
            }) return false;
        });
 
    });
</script>

js部分

     public function loudong() {
        $ld_id= input('post.parent_id');
        $where['district_id'] = $ld_id;
        $area = db('表名')->field('id, name')->where($where)->select();
        if ($area) {
            $option = '<option value=""></option>';
            foreach ($area as $key => $value) {
                $option .= '<option   value="'.$value['id'].'">'.$value['name'].'</option>';
 
            }
            echo json_encode(array('error' => 0, 'option' => $option));
        } else {
            echo json_encode(array('error' => 1));
        }
 
    }

pHp部分

可以實(shí)現(xiàn)無限級(jí)分類~

當(dāng)前名稱：pHpthinkphp5+layui實(shí)現(xiàn)四級(jí)聯(lián)動(dòng)
轉(zhuǎn)載注明：http://www.muchs.cn/news6/291256.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)網(wǎng)站制作、網(wǎng)站維護(hù)、軟件開發(fā)、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)