二级联动

Posted 2021-01-13 chaihtml

//城市    控制器方面

//省级地区
public function one(){
    $data=Db::table(‘area‘)->where("parent_id=0")->select();
    $aa=$data[0][‘id‘]+100;
    $shi_ji=Db::table("area")->where("parent_id=‘$aa‘")->select();
    $arr=[‘data‘=>$data,‘shi‘=>$shi_ji];
    return view("show",[‘arr‘=>$arr]);
}
//市级地区
public function two(){
    $id=Request::instance()->param("id");
    $b=Db::table(‘area‘)->where("parent_id=‘$id‘")->select();
    return view("show1",[‘arr‘=>$b]);
}
//省
public function three(){
    $id=Request::instance()->param("id");
    $b=Db::table(‘area‘)->where("parent_id=‘$id‘")->select();
    return view("show2",[‘arr‘=>$b]);
}

//html页面   show页面显示省级城市

 <table>
    <tr>
        <td>省级：</td>
        <td>
            <select name="" id="" class="one">
                <option value="请选择">请选择</option>
                {volist name="arr.data" id="v"}
                    <option value="{$v.id}">{$v.name}</option>
                {/volist}
            </select>
        </td>
        <td>市级：</td>
        <td>
            <select name="" id="" class="two">
                <option value=""></option>
            </select>
        </td>
        <td>县/区：</td>
        <td>
            <select name="" id="" class="three">

                <option value=""></option>

            </select>
        </td>

    </tr>
</table>

//js调用show1   show2页面

 $(document).on("change",".one",function () {
    var one=$(this).val();
    $.get(
        "{:url(‘login/two‘)}?id="+one,
        function (data) {
            $(".two").html(data);
        }
    )
})

//市区
$(document).on("change",".two",function () {
    var two=$(this).val();
    $.get(
        "{:url(‘login/three‘)}?id="+two,
        function (data) {
            $(".three").html(data);
        }
    )
})

//show1显示二级城市

<select name="" id="" class="one">
    <option value="">请选择</option>
    {volist name="arr" id="v"}
    <option value="{$v.id}">{$v.name}</option>
    {/volist}
</select>

//show2显示三级城市

<select name="" id="" class="one">
    <option value="">请选择</option>
    {volist name="arr" id="v"}
       <option value="{$v.id}">{$v.name}</option>
    {/volist}
</select>