zoukankan      html  css  js  c++  java
  • 二级联动

    //城市    控制器方面

    //省级地区
    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>



  • 相关阅读:
    C
    A
    枚举子集的几种方法
    Codeforces Round #476 (Div. 2) [Thanks, Telegram!] ABCDE
    wannafly挑战赛14
    2018西安电子科大同步赛
    概率dp学习记录
    xcoj 1103 插线板(树链刨分求最大子段和)
    bzoj 2286(虚树+树形dp) 虚树模板
    bzoj3012(Trie)
  • 原文地址:https://www.cnblogs.com/chaihtml/p/9812774.html
Copyright © 2011-2022 走看看