刚刚练手的JQuery，希望大神们指正
主要实现以下功能：
1、三级菜单级联加载数据
2、可以在不操作脚本的情况下，给元素加属性实现级联功能
3、自定义动态显示数据
咨询问题：
对于一般比较固定不变的数据，是不是应该生成静态的文件，直接加载整个数据文件，访问文件比较好？还是这样动态的访问比较好？
一般的数据文件，小的会在50k，大的会在3M
这个可以讨论下
/**
省市区县级联
*/
(function($){ /*
*
*获取ele的相对元素
*
**/
function CssFirstElement(ele, css) {
ele = $(ele);
if (!ele) {
var event = event ? arguments[0] : window.event;
ele = event.srcElement ? event.srcElement : event.target;
ele = $(ele);
}
var targetInpage; if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:#".length) == "css:#") {
//以css:# 开头，是一个ID选择器
targetInpage = $( $(css.substring(4))[0] );
} else if ((typeof css == 'string') && css.constructor == String && css.substr(0, "css:".length) == "css:") {
//以css: 开头，是一个基于元素的父级元素
var css0 = css.substring(4);
if (css0.split(' ').length==1) {
var parentCss = css0.substring(0, css0.indexOf(' '));
var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");
targetInpage = ele.parents(eleCss + ":first");
} else {
var parentCss = css0.substring(0, css0.indexOf(' '));
var eleCss = css0.substring(css0.indexOf(' ')).replace(/(^\s*)|(\s*$)/g, "");
targetInpage = ele.parents(parentCss+":first").find(eleCss);
} } else if ((typeof css == 'string') && css.constructor == String) {
targetInpage = $(css);
} else {
//对象直接返回
return [];
} return targetInpage.length > 0 ? $(targetInpage.get(0)) : [];
}
function SelectData(element) {
this.element = element;//元素
this.optionUrl = element.attr("data-optionUrl");//加载选项的url
this.defaultValue = element.attr("data-defaultValue");//加载选项试的默认值
this.display = element.attr("data-display");//返回对象的 option 显示的键
this.value = element.attr("data-value");//返回对象的 option 绑定的键
this.changeTarget = CssFirstElement(element, element.attr("data-changeTarget"));//元素选择改变后，触发目标元素重新加载选项
this.showAll = element.attr("data-showAll");//是否显示全部选项
this.immediately = element.attr("data-immediately");//是否立即加载选项
this.param = element.attr("data-param");//请求时携带的参数
//有需要触发改变选项的目标，就添加change事件，触发目标请求时，携带的参数
if (this.changeTarget.length > 0) {
this.element.on("change.selectDataFill",$.proxy(this.changeEvent,this));
}
this.element.data("SelectDataFillObj",this);
}
SelectData.prototype = {
changeEvent: function () {
this.changeTarget.attr("data-param",
this.element.get(0).name + "=" + this.element.get(0).value);
this.changeTarget.data("SelectDataFillObj").empty(); var targetW=this.changeTarget;
while (true) {
targetW = targetW.data("SelectDataFillObj").changeTarget;
if (targetW && targetW.length>0) {
targetW.data("SelectDataFillObj").empty();
} else {
break;
}
}
this.changeTarget.data("SelectDataFillObj").LoadData();
},
empty: function () {
this.element.empty();
if (this.showAll) {
$("<option value=\"\">全部</option>").appendTo(this.element);
}
},
FillDataSuccess: function (data) {
debugger;
var element = this.element;
this.empty(); for (var i = 0; i < data.list.length; i++) {
var item = data.list[i];
$("<option value=\"" + item[this.value] + "\" " +
(item[this.value] == this.defaultValue ? "selected" : "") + ">" +
item[this.display] + "</option>").appendTo(element);
}
if (this.element.val()!='') {
this.element.trigger("change.selectDataFill");
}
},
LoadData: function () {
$.getJSON(this.optionUrl,this.element.attr("data-param")).success($.proxy(this.FillDataSuccess, this));
}
};
$.fn.SelectDataFill = function () { this.each(function (index, element) { var element = $(element);
var obj = new SelectData(element);
if (obj.immediately) {
obj.LoadData();
} }); } })(jQuery);
应用：
<td colspan="3">
<select name="ProvinceId"
data-optionUrl="/BasicPlugin/Area/ProvinceJson"
data-defaultValue="3"
data-display="Name"
data-value="Id"
data-changeTarget="css:td select[name=CityId]"
data-showAll="true"
data-immediately="true">
<option value="">请选择</option>
</select>
<select name="CityId"
data-optionUrl="/BasicPlugin/Area/CityJson"
data-defaultValue="1"
data-display="Name"
data-value="Id"
data-changeTarget="css:td select[name=DistrictId]"
data-showAll="true">
<option value="">请选择</option>
</select>
<select name="DistrictId"
data-optionUrl="/BasicPlugin/Area/DistrictJson"
data-defaultValue="1"
data-display="Name"
data-value="Id"
data-changeTarget="css:td select[name=StreetId]"
data-showAll="true">
<option value="">请选择</option>
</select>
<select name="StreetId"
data-optionUrl="/BasicPlugin/Area/StreetJson"
data-defaultValue="1"
data-display="Name"
data-value="Id"
data-showAll="true">
<option value="">请选择</option>
</select>
</td>
以上代码中的请求路径，如 /BasicPlugin/Area/StreetJson 返回的json格式为：
{
list:[
{ID:1,Name:"名称",Code:"001"},
{ID:1,Name:"名称",Code:"001"}
]
}
效果如下：
一级选择改变，相关联的均重新加载数据，如果加载项中有默认值，则会选中默认值
暂时公开访问地址可以看到效果：
http://uiprogrammer.sxxxt.cn/Home/Index
