三级联动省市区demo

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="90" align="right">
服务区域：
</td>
<td>
<?=Html::dropDownList("txtProvince",$model->Province,$area, ['style'=>'width:80px'])?>
<?=Html::dropDownList("txtCity",$model->City,[], ['style'=>'width:80px'])?>
<?=Html::dropDownList("txtDistrict",$model->District,[], ['style'=>'width:80px'])?>
</td>
</tr>
</tbody>
</table>

   <script type="text/javascript">

    $("select[name=txtProvince]").change(function(){
              var cityid=$(this).val();
    	      var City= <?php echo empty($model->City)?"0":$model->City?>;
    	      var District= <?php echo empty( $model->District)?"0": $model->District?>;
             $.ajax({
                    type: "Post",
                    url: "/admin/manage/getcity",
                    data: {Id:cityid},
                    dataType: "json",
                    success: function(result) {
                    $html="";
                    $.each(result,function(i,item){
                    if (City==i) {
                       $html+="<option value='"+i+"' selected='selected'>"+item+"</option>";	
                    }else{
                        $html+="<option value='"+i+"'>"+item+"</option>";
                      }							

                     });						
                     $("select[name=txtCity]").html("");	
                    $("select[name=txtCity]").prepend($html);

                    $cityid=$("select[name=txtCity]").val();
                    $.ajax({
                            type: "Post",
                            url: "/admin/manage/getcity",
                            data: {Id:$cityid},
                            dataType: "json",
                            success: function(result) {
                                $html="";
                                $.each(result,function(i,item){
                                  if (District==i) {
                                    $html+="<option value='"+i+"' selected='selected'>"+item+"</option>";	
                                   }else{
                                     $html+="<option value='"+i+"'>"+item+"</option>";
                                  }
									
                                 });						
                                 $("select[name=txtDistrict]").html("");	
                                 $("select[name=txtDistrict]").prepend($html);
                             }
                         });						 						 
                      }
                });    

    });


  $("select[name=txtCity]").change(function(){
        var Districtid=$(this).val();
        $.ajax({
                type: "Post",
                url: "/admin/manage/getcity",
                data: {Id:Districtid},
                dataType: "json",
                success: function(result) {
                    $html="";
                    $.each(result,function(i,item){
                       $html+="<option value='"+i+"'>"+item+"</option>";
                    });						
                    $("select[name=txtDistrict]").html("");	
                    $("select[name=txtDistrict]").prepend($html);
                    
                  }
              });         

       });

		$(function(){

			$("[name=txtProvince]").trigger("change");

		})

     </script>

		    public function actionGetcity(){
		       
		            $id = $_POST["Id"];
		            $data=Area::find()->where(["ParentId"=>$id])->asArray()->all();
			        $area=array();
			        foreach ($data as $key => $value) {
			        	 $area[$value["Id"]]=$value["CName"];
			        }		            
		            echo json_encode($area);
		     
		    }