Jquery城市联动

来源：互联网发布：apm地面站软件安卓编辑：程序博客网时间：2024/05/16 18:22

//个人资料public function setprofile(){    $str=DB::table('address')->where('parent_id','1')->select('ad_name','id')->get();    return view('user/setprofile')->with('str',$str);}//城市public function city(){    $id=Request::input('id');    $str=DB::table('address')->where('parent_id',$id)->select('ad_name','id')->get();    return view('user/liandong')->with('str',$str);}

setprofile.php 默认展示页面

<select id="province-select" class='input' hidefocus="true" style="width: 30%">    <option value="-1">请选择</option>    @foreach($str as $v)    <option value="{{ $v['id'] }}">{{$v['ad_name']}}</option>        @endforeach</select><select id="province-select" class='input' hidefocus="true" style="width: 30%"><option value="-1">请选择</option></select><select id="province-select" class='input' hidefocus="true" style="width: 30%"><option value="-1">请选择</option></select>

<script src="/jquery-2.1.4.min.js"></script><script>    //四季联动 Jquery代码    $(function(){        $('.input').change(function(){            $(this).nextAll().empty();//清空            $(this).nextAll().append("<option value='-1'>请选择</option>");//追加            var id=$(this).val();            //alert(id);return false;            var obj=$(this);            $.ajax({                url:'city',//跳入city方法 将city控制器下跳转页面的内容替换                type:'post',                data:{                    id: id                },success: function (data){                    //alert(data);return false;                    obj.next().html(data);                }            })        })    })</script>

liandong.php也就是要替换的页面

<select id="province-select" class='input' hidefocus="true">   <option value="-1">请选择</option>
 @foreach($str as $v)        <option value="{{ $v['id'] }}">{{$v['ad_name']}}</option>    @endforeach</select>

0 0