基于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);
        }
    </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);
    }

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