地区的联动

PHP页面：

//二级联动

public function diqu_show()
{
    $data=Db::table("area")->where("parent_id=0")->select();
    //var_dump($data);die;
    $aa=$data[0]['id']+100;
    $shi_data=Db::table("area")->where("parent_id='$aa'")->select();
   // var_dump($shi_data);die;
    $arr=['data'=>$data,'shi_data'=>$shi_data];
    return view("diqu_show",['arr'=>$arr]);
}
//市级
public function shi_show()
{
    $parent_id=Request::instance()->param("parent_id");
    $shi_data=Db::table("area")->where("parent_id='$parent_id'")->select();
    return view("diqu_show2",['shi_data'=>$shi_data]);
}
//省级
public function shiji_show()
{
    $shi=Request::instance()->param("shi");
    $shi=Db::table("area")->where("parent_id='$shi'")->select();
    return view("diqu_show3",['shi'=>$shi]);
}
HTML页面：
diqu_show.html页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<center>
    <table>
        <tr>
            <td>
                省区：
                <select name="" id="" class="sheng">
                    <option value="">请选择</option>
                    {volist name="arr.data" id="v"}
                    <option value="{$v.id}">{$v.name}</option>
                    {/volist}
                </select>
            </td>
            <td>
                &nbsp;&nbsp;&nbsp;&nbsp;市级：
                    <select name="" id="" class="shi">
                        <option value="">请选择</option>
                    </select>
            </td>
            <td>
                &nbsp;&nbsp;&nbsp;&nbsp;县/区：
                <select name="" id="" class="xian">
                    <option value="">请选择</option>
                </select>
            </td>
        </tr>
    </table>
</center>
<script src="__STATIC__/js/jquery.min.js"></script>
<script>
    $(function () {
        $(document).on("change",".sheng",function () {
            // var sheng=$("select option:selected").val();
            var sheng=$(this).val();
            //请求
            $.get(
                "{:url('index/shi_show')}?parent_id="+sheng,
                function (data) {
                    $(".shi").html(data)
                }
            )
        })

        $(document).on("change",".shi",function () {
            // var sheng=$("select option:selected").val();
            var shi=$(this).val();
            //请求
            $.get(
                "{:url('index/shiji_show')}?shi="+shi,
                function (data) {
                    $(".xian").html(data)
                }
            )
        })

    })
</script>
</body>
</html>
diqu_show2.html页面

<option value="">请选择</option>
{volist name="shi_data" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}

diqu_show3.html页面

<option value="">请选择</option>
{volist name="shi" id="v"}
<option value="{$v.id}">{$v.name}</option>
{/volist}

posted @ 2018-10-14 19:14 PHP小媛阅读(219) 评论(0) 编辑收藏举报

立里青争

地区的联动

公告