jquery ajax 地级三级菜单

来源：互联网发布：mac最好的压缩软件编辑：程序博客网时间：2024/04/25 04:07

前端

<tr>
<th width="200px" style="text-align: center;">公司区域：</th>
<th align="left">
<select class="form-control" id="shengji" style="width: 100px;resize: none;margin: 10px 0px;display:inline-block;">
<option >请选择</option>
{volist name="area_list" id="i"}
<option value="{$i.id}">{$i.name}</option>
{/volist}
</select>
<script type="text/javascript">
$("#shengji").change(function(){
var val = $(this).val();
$("#shiji option").remove();
$("#qu option").remove();
$.ajax({
url:'/index.php/manager/chargecom/child',
type:'get',//可选get
data:'id='+val,//传给PHP的数据，多个参数用&连接
// dataType:'json',//服务器返回的数据类型可选XML ,Json jsonp script html text等
success:function(data){
$("#shiji option").remove();
$("#qu option").remove();
$("#shiji").append(data);
}

})
})
</script>

<select class="form-control" id="shiji" style="width: 100px;resize: none;margin: 10px 0px;display:inline-block;">
</select>
<script type="text/javascript">
$("#shiji").change(function(){
var val = $(this).val();
$("#qu option").remove();
$.ajax({
url:'/index.php/manager/chargecom/child',
type:'get',//可选get
data:'id='+val,//传给PHP的数据，多个参数用&连接
// dataType:'json',//服务器返回的数据类型可选XML ,Json jsonp script html text等
success:function(data){
$("#qu option").remove();
$("#qu").append(data);
}

})

})
</script>
<select class="form-control" id="qu" style="width: 100px;resize: none;margin: 10px 0px;display:inline-block;">
</select>
</th>
</tr>

后台

public function child(){
//获取id查询出下一级数据
$html = '<option value="">'.'请选择'.'</option>';
foreach (Area::getParent(Request::instance()->param('id')) as $key=>$val){
$html.= '<option value="'.$val["id"].'">'.$val["name"].'</option>';

}
//输出数据
echo $html;
}

0 0