
前端页面□□□□效果 如下图所□□示:

之后我们□□□□要通过数□□□据库获取□□□□省市区的□□数据信息,有人也许□□会问,为什么不□□□□通过ajax来异步获□□□取,而要一次□□性直接获□□□□取,因为异步□□请求是需○要去请求○数据库的,可能会出☆现卡一下□□才出现下□□□一级信息,可能实现□□□效果不太□□好,所以我们◢采取一次◣性直接获□□□取,如下图所□□示:

获取数据□□信息之后,我们在结▼合js,就能实现□□动态省市□□□区三级联□□动了,具体如下□□□图所示:

//获取省信息
function getP(){
var select=$('#sel_p');
<volist name="p" id="item">
var option="<option value='{$item.category_id}'>{$item.category_name}</option>";
select.append(option);
</volist>
}
//获取市信息
function getC(pId){
var select=$('#sel_c');
select.empty();
<volist name="c" id="iten">
if({$iten.parent_id} == pId){
Var option="<option value='{$iten.category_id}'>{$iten.category_name}</option>";
select.append(option);
}
</volist>
}
//获取区信息
function getA(aId){
var select=$('#sel_a');
select.empty();
<volist name="a" id="ite">
if({$ite.parent_id} == aId){
var option="<option value='{$ite.category_id}'>{$ite.category_name}</option>";
select.append(option);
}
</volist>
}
完成之后,最终实现□□效果如下✦图所示:
