ajax+jQuery+thinkphp实现动态下拉表的实现

//js的调用thinkphp控制器

<script>

$(document).ready(function(){
$("#register").click(function(){   window.open("__URL__/register.html","_parent");
});
$("#login").click(function(){   window.open("__URL__/login.html","_parent");
});
  $('#pro').change(function(){
        $.ajax({
            type:"post",
            url:"{:U('Home/index/baobiaotongji')}",
            data:'pro_idc='+$('#pro').val(),
            dataType:"json",
            success:function(data){
                $('#city').html(data);
            }
        });
    });

$('#city').change(function(){
    $.ajax({
        type:"post",
        url:"{:U('Home/index/baobiaotongji')}",
        data:'pro_idq='+$('#city').val(),
        dataType:"json",
        success:function(data){
            $('#area').html(data);
        }
    });
 });
 //t统计图展示
     $('#tongji1').click(function(){
   
if($(this).val()=='种类特征'){
$(this).val('收起');
$('#tongjitu').slideDown('slow');
}
else{
$(this).val('种类特征');
$('#tongjitu').slideUp('slow');
}
   
});
//统计报表弹出
     $('#tongji').click(function(){
    $.ajax({
        type:"get",
        url:"{:U('Home/index/baobiaotongjichaxun')}",
        data:{codename:$('#pro').val(),
townname:$('#city').val(),
villagename:$('#area').val()
},
        dataType:"json",
        success:function(data){
if(data[0].code=='liji'){
alert("系统出现错误！");
return false;
}
//alert(data[1].length);
$("#code").html(data[0].code);
//for(i=0;i<=data[1].length-1;i++)
var num1=data[1].length;
if(num1<=15){num1=num1;}
else {num1=15;}
for(i=0;i<=num1-1;i++)
{
// $('#chakan1 table').append("<tr><td bgcolor=#FFFFFF width=11%>"+data[1][i].codename+"</td> <td bgcolor=#FFFFFF width=11%>"+data[1][i].num+"</td> <td bgcolor=#FFFFFF width=13%>"+data[2][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[3][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[4][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[5][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[6][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[7][i].num+"</td></tr>");
  $('#chakan1 table').append("<tr><td bgcolor=#FFFFFF width=11%>"+data[1][i].codename+"</td> <td bgcolor=#FFFFFF width=11%>"+data[1][i].num+"</td> <td bgcolor=#FFFFFF width=13%>"+data[2][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[3][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[4][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[5][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[6][i].num+"</td><td bgcolor=#FFFFFF width=13%>"+data[7][i].num+"</td></tr>");
}
$.blockUI(
  { 
message: $('#chakan1'), 
css: { width: '800px',
top: '1%',
left: '20%',
} }
  );


        }
       });
});
 $('#no1').click(function() {
            $.unblockUI();
            return false;
        }); 
});

</script>

//thinkphp控制器的实现

public function baobiaotongji(){
$name=session("Name");
$clientid=session("ID");
$this->assign("name",$name);
$this->assign("id",$clientid);
   $m=M('gushuxinxi');
if (IS_POST) {
$opt ="<option value='1'>--请选择--</option>";
if(I('post.pro_idc','addslashes')){
$parent_id['CodeName'] = I('post.pro_idc','addslashes');
$region = $m->field('TownName')->where($parent_id)->group('TownName')->order('TownName')->select();
foreach($region as $key=>$val){
$opt .= "<option value='{$val['townname']}'>{$val['townname']}</option>";
}
$parent_id1['TownName'] = I('post.pro_idq','addslashes');
$region = $m->field('VillageName')->where($parent_id1)->group('VillageName')->order('VillageName')->select();
foreach($region as $key=>$val){
$opt .= "<option value='{$val['villagename']}'>{$val['villagename']}</option>";
}
}
echo json_encode($opt);
} 
else {
$region = $m->field('CodeName')->group('CodeName')->order('CodeName')->select();
//var_dump($region);
//die;
$this->assign('region',$region);
$this->display();
}
}

//实现效果图