用到的知识Ajax +php
我以商品销售区域的动态选择为例
数据库设计：
[sql]
CREATE TABLE `think_area` (
`id` int(20) NOT NULL AUTO_INCREMENT,
`pid` int(20) NOT NULL DEFAULT ‘0’,
`area_name` char(100) NOT NULL,
`area_path` char(50) NOT NULL,
`ban_id` int(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;</pre>
[/sql]
其中pid是父级分类的ID值，area_name 是当前区域名称呢 area_path是父级area_path名加“-”+父级ID，例如“0-19-22”，o是顶级区域ID，19是父级的父级区域ID,22是父级区域ID。
ban_id是板块ID，不同的板块销售不同的商品可能送货区域不同，所以绑定下板块ID
实验数据
[sql]
<pre>INSERT INTO `think_area` VALUES (‘2’, ‘0’, ‘测试1’, ‘0’, ”, ‘2’);
INSERT INTO `think_area` VALUES (‘3’, ‘2’, ‘测试1-1’, ‘0-2’, ”, ‘2’);
INSERT INTO `think_area` VALUES (‘4’, ‘0’, ‘南京’, ‘0’, ”, ‘1’);
INSERT INTO `think_area` VALUES (‘5’, ‘4’, ‘江宁’, ‘0-4’, ”, ‘1’);
INSERT INTO `think_area` VALUES (‘6’, ‘5’, ‘河海大学’, ‘0-4-5’, ”, ‘1’);
INSERT INTO `think_area` VALUES (‘8’, ‘4’, ‘仙林’, ‘0-4’, ”, ‘1’);
INSERT INTO `think_area` VALUES (‘9’, ‘8’, ‘南京大学’, ‘0-4-8’, ”, ‘1’);
INSERT INTO `think_area` VALUES (’10’, ‘4’, ‘鼓楼’, ‘0-4’, ”, ‘1’);
[/sql]
选择原理如下：
1.如果用户曾经没选择过任何区域，取得该板块的所有顶级分类传过去供选择，如果曾经选择了某个区域则不管是不是选择到了最底下，都调用函数显示已经选择过的区域并加上下一级的区域供选择（如果有下一级的话）
2.你可以把选择ID传递在cookie或querystring中，这问题不大，我选择的是在这两个中都传递、
3.监听select的值变化，变化了触发刚才的显示函数
HTML:
[html]
<div id="select1"rel="{$Think.get.banid}" aid="{$Think.get.aid}" ></div>
<select class="span2 area " onchange="area_select(this.value,true)"id="select_start">
<option value="0" >选择区域</option>
<volist name="area_data" id="li">
<option value="{$li.id}">{$li.area_name}</option>
</volist>
</select>
<span id="area_append">
</span>
</div>
[/html]
很明显我把板块id $banid 区域ID $aid隐藏在HTML中，供JS读取数据，选择框数值变化激发area_select（）函数
需要jquery.js和jquery.cookies.2.2.0.min.js 两个文件
[js]
$("document").ready(function(){
var ban_id=$("#select1").attr("rel");
aid=$.cookies.get("area_id"+ban_id);
if(aid){
area_select(aid);
}
})
function area_select(area_id,r){
var ban_id=$("#select1").attr("rel");
if(area_id==0)
exit;
url=ROOT+"Ajax/select_area?area_id="+area_id;//ROOT="http://localhost/index.php/";
$.get(url,function(data){
$("#select_start").remove();
$("#area_append").html(data)
})
$.cookies.setOptions(cookieOptions);
$.cookies.set("area_id"+ban_id,area_id);
if(r){
n_url=ROOT+"Shop/index?banid="+ban_id+"&aid="+area_id;
window.location.href=n_url;
}
}
[/js]
上面的自己分析
下面是PHP代码,用的thinkphp框架，简化了查询操作、、、不懂的查手册，三分钟就能看明白什么回事
[php]
function select_area() {
$Area = D("Area");
$id = (int) $_GET["area_id"];
$data = $Area->find($id);
$area_path = $data["area_path"];
$ban_id = $data["ban_id"];
$level_num = count($level_data = explode("-", $area_path)); //计算层级
$result = "";
for ($i = 0; $i < $level_num; $i++) {
$area_path = "0";
for ($j = 1; $j < $i + 1; $j++) {
$area_path.="-" . $level_data[$j];
}
$row = $Area->where("area_path=" . "’$area_path’ and ban_id=" . $ban_id)->select();
$str = ‘<select class="span2 area" onchange="area_select(this.value,true)" id="select’ . $i . ‘">’;
foreach ($row as $key => $value) {
$selected = "";//注意为什么要引入这个值！！是为了记住刚才选择过的项。
if ($value["id"] == $level_data[$i + 1] || $value["id"] == $id)
$selected = "selected";
$str.="<option value=" . $value[‘id’] . " " . $selected . " >" . $value["area_name"] . "</option>";
}
$str.="</select>";
$result.=$str;
}
/* * ******
* 下面是判断有无子级元素并取出来
*/
$data = $Area->where("pid=" . $id)->select();
if ($data) {
$str = ‘<select class="span2 area" onchange="area_select(this.value,true)" id="select’ . $level_num . ‘">’;
foreach ($data as $key => $value) {
$str.="<option value=" . $value[‘id’] . " " . $selected . " >" . $value["area_name"] . "</option>";
}
$str.="</select>";
$result.=$str;
}
echo $result;
}
[/php]