基于JavaScript+jquery+ajax+thinkphp制作的三级连动

项目中需要先获取省名称，根据省名称再获取市名，然后获取市下的所商场，虽然网上有不少现成的deom，但还得自己加以改造，加上数据也不固定，所以决定自己写，也可以加深一下基本功。

思路:先制作3个select表单,分别是省，市，商场，默认值为全部，3个表单id分别为province，city，shop，首先将省读出来，显示到页面上，当用户选择省的下拉列表时，此时获取用户选中的省id，通过ajax连接php，查询出这个省下全部的市，用json的方式返回给JavaScript，用jquery来解析，并设置给city这个下拉菜单，然后依次类推。

HTML表单
/*  onchange:当选中下拉菜单时执行的操作 */
<select id="province"  onchange="linkAge('province','provinceAJax','city','shop')">
<option value="0">全部</option>
/*  volist:Thinkphp自带标签 */
<volist name='province' id='province'>
/*  将省份数据全部读出来 */
<option class="province" grade="{$province.id}" value="{$province.id}">
{$province.province_name}
</option>
</volist>
</select>
市
<select id="city"  onchange=linkAge('city','cityAJax','shop')>
<option value="0">全部</option>
</select>
商场
<select name = "shop" id='shop'>
<option value="0">全部</option>
</select>

JavaScript部分 代码虽多，但很简单

<script type="text/javascript">
// 参数: selectId 当前所点击的select表单的id，nextSeletId，要将查询出的数据给下一个select表单的id
// threeSelectId:第三个联动的id(用于清除之前所选)
function linkAge(selectId, ajaxController, nextSeletId, threeSelectId) {
var url = "{$Think.const.DO_MAIN}"; // 你的页面URL
var xmlHttp;
// 创建xml对象
function $_xmlhttprequest() {
if (window.ActivexObject) {
xmlHttp = new ActiveXObject('Mircrosoft.XMLHTTP');
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

var myselect = document.getElementById(selectId);  // 获取某个下拉菜单的ID
var index = myselect.selectedIndex; // 获取选择的索引
var select_val = myselect.options[index].value; // 获取具体选择的是哪个值
var obj = document.getElementById(nextSeletId); // 传输给下一个select的id
var threeSelectId = document.getElementById(threeSelectId); // 最后一个select的id
$_xmlhttprequest();

// 通过get方式发送请求，下面的url地址，php代码在下面
xmlHttp.open("GET", url + "/Admin/Base/" + ajaxController + "/id/" + select_val, true);
xmlHttp.onreadystatechange = function () {
// 判断访问是否成功
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
if (xmlHttp.responseText) {
var arr = xmlHttp.responseText;  // responseTextphp返回的json数据
var dataObj = eval("(" + arr + ")");//这里要加上加好括号和双引号的原因我也不知道，就当是json语法，只能死记硬背了
obj.options.length = 1; // 如果不加这句，则每次选择一次省市，城市不会清空，则会在原有基础上增加
if (threeSelectId) {
threeSelectId.options.length = 1;// 同上 用来清空最后一个选择下拉菜单中的内容
}
// jquery方法，将json数据取出来，并添加到下一级select列表中
$.each(dataObj, function (idx, item) {
obj.options.add(new Option(item.name, item.id));
})
}
} else {
// 当访问失败所给的提示
alert("操作失败,请刷新后重新操作!");
}
}
};
// 发送ajax请求
xmlHttp.send(null);

4000
}
</script>

ThinkPHP控制器

// 查询省的数据，并返回给前段
public function provinceAJax()
{

$data = I('get.');
$id = I('get.id');
$city = D('Admin/city');
$city = $city->where("province_id = '$id'")->select();

// 因为JavaScript中转换json后输出的字段是name，所以要在数组中添加一个name字段，是为了统一
foreach ($city as $key => $val) {
$city[$key]['name'] = $city[$key]['city_name'];
}
echo json_encode($city);
}

public function cityAJax()
{
$data = I('get.');
$id = I('get.id');
$shop = D('Admin/shop');
$shop = $shop->where("city_id = '$id'")->select();
// 更改数组值
foreach ($shop as $key => $val) {

$shop[$key]['name'] = $shop[$key]['shop_name'];
}
echo json_encode($shop);
//$this->show_bug($province);
}

至此，三级连动功能实现完毕，但里面还有很多内容可以在优化，现在还不是很通用，有时间在完善一下。