select框 多级联动

数据表结构

id,city_name,pid(父级ID)

控制器代码

        $city = City::where('pid',0)->select();
        return View::fetch('index/save',['data'=>$city]);

前端

    <lable>地区</lable>
    <select name="city[]" id="first">
        <option value="">请选择省份</option>
        {foreach $data as $value}
        <option value="{$value.id}">
            {$value.city}
        </option>
        {/foreach}
    </select>
      <select name="city[]" id="second">
          <option value="">请选择城市</option>
      </select>
      <select name="city[]" id="third">
          <option value="">请选择区县</option>
      </select>

js

   //二级分类
    $('#first').blur(function () {
        var id = $(this).val()
        //清空第二个下拉框 城市元素
        $('#second').empty()
        $('#second').append("<option value=''>请选择城市</option>")
        $.ajax({
            url:'second/'+id,
            success:function (res) {
                for (var i=0;i<res.data.length;i++){
                    $('#second').append("<option value='"+res.data[i]['id']+"'>"+res.data[i]['city']+"</option>")
                }
            }
        })
    })
    //三级分类
    $('#second').blur(function () {
        var id = $(this).val()
        $('#third').empty()
        $('#third').append("<option value=''>请选择区县</option>")
        $.ajax({
            url:'third/'+id,
            success:function (res) {
                for (var i=0;i<res.data.length;i++){
                    $('#third').append("<option value='"+res.data[i]['id']+"'>"+res.data[i]['city']+"</option>")
                }
            }
        })
    })

控制器

        $city = City::where('pid',$id)->select();
        return json([
            'code' => 200,
            'msg' => 'ok',
            'data' => $city
        ]);