通过切换页面引用的js文件实现下拉框的联动

在之前的项目之中，页面最高的角色级别是城市级，一个页面最多是展示一个城市的信息。

因此为每个城市创建了一个js文件，在其中存放此城市的信息，如图：

在此我们关注js文件中存放的区县信息，以北京为例，其区县信息如图：

var Districts=[{name:‘昌平‘,index:0},{name:‘朝阳‘,index:1},{name:‘崇文‘,index:2},{name:‘大兴‘,index:3},{name:‘东城‘,index:4}];

由于之前的页面最多加载某一城市的js文件，Districts在此处被简单的定义为全局变量。

现在需要做一个汇总的页面，其中有城市下拉框和区县下拉框，且需要实现两个下拉框的联动。

实现方法：

由于各城市js文件全局变量Districts命名冲突，考虑到项目当前状况，我采取的方式是：每当在下拉框选择某一城市，就移除之前的城市js文

件，加载当前城市的js文件，并将区县信息填充到区县下拉框。城市下拉框选择城市后触发的方法代码如下：

       //城市js脚本
        var cityscript;
       //获得区县下拉列表
        var GetDistrict = function () {
            var city = $("#CitySelect").val();
            //将相对路径转换为绝对路径
              var citybasepath = ‘@ContentMap.JsContent("Js/City/{script}")‘;
            if (cityscript) {
                document.body.removeChild(cityscript);
            }
            cityscript = document.createElement("script");
            cityscript.type = "text/javascript";
            cityscript.charset = "gb2312";

            cityscript.src =citybasepath.replace("{script}",city+"city.js");
            document.body.appendChild(cityscript);
            //给予时间解析js文件后 再填充区县下拉框
              window.setTimeout(FillDistrict, 100);
        };

需要注意的是：

1.定义一个变量cityscript用来存放引用城市js文件的script对象，这样做在切换城市的时候可以很方便的将之前的js文件移除。

2.ContentMap.JsContent 是将相对路径变成绝对路径的一个方法(项目使用asp.net mvc)，使用”{script}”字符串进行占位是因为不能向

后台的方法ContentMap.JsContent传入js变量且转换成绝对路径之后会有版本号的后缀。

3.引用新的js文件后，给出浏览器足够的时间解析文件，然后再填充区县下拉框。

填充区县下拉框的方法代码非常基础，如下所示：

       var FillDistrict = function () {
            if (Districts) {
                $("#DistrictSelect").empty();
                $("#DistrictSelect").append("<option index=‘-1‘ value=‘‘>区县</option>");
                for (var i = 0; i < Districts.length; i++) {
                    $("#DistrictSelect").append("<option index=‘" + Districts[i].index + "‘ value=‘" + Districts[i].name 

                      + "‘>" + Districts[i].name + "</option>");
                }
            } else {
                alert("获取城市区县数据失败！");
            }
        };

总结：

总的来说频繁的切换js文件的引用并非正道，只是当前项目环境下一种快速实现功能的妥协方式。

如果各城市的区县信息变量的名称按城市区分，并放在一个js文件之中，实现起来就更加轻松愉快了。

这也提醒我们在项目设计的时候就应该全面的考虑以后可能出现的需求，更加合理的设计变量和文件结构。

（期待各位大神给出宝贵意见和建议）