jquery 实现地多选框联动插件

代码如下:

// 使用：$(_event_src_).autoselect(_reload_, reload_url); 

// 前台用get方法传输<select>标签地属性name和选中<option>地属性value 

// 后台用json格式传输数据 

// 格式: { value:<option>地属性value, text:<option>地显示文本 } 

(function($) { 

$.fn.extend({ 

autoselect: function(dest, url) { 

return this.each(function() { 

$.selectchange($(this), $(dest), url); 

}); 

}, 

}); 

// 重置复选框 

$.selectreset = function(target) { 

if (target != null) { 

$.selectreset(target.data(nextselect)); 

target.empty(); 

target.append(target.data(defaultopt)); 

} 

}; 

// 加载复选框 

$.selectload = function(target, data) { 

$.each(data, function(index, content) { 

var option = $(<option></option>) 

.attr(value, content.value).text(content.text); 

target.append(option); 

}); 

}; 

// 绑定 change 事件 

$.selectchange = function(target, dest, url) { 

// 绑定联动链 

target.data(nextselect, dest); 

// 记录默认选项(first option) 

if (target.data(defaultopt) == null) 

target.data(defaultopt, target.children().first()); 

dest.data(defaultopt, dest.children().first()); 

$(document).ready(function() { 

target.change(function(event) { 

var _target = event.target || window.event.srcelement; 

if (_target.value != target.data(defaultopt).attr(value)) { 

$.getjson(url, { 

name: _target.name, 

value: _target.value 

}, function(data, status) { 

if (status == success) { 

$.selectreset(target.data(nextselect)); 

$.selectload(target.data(nextselect), data); 

} 

}); // 后台以 json 格式传输数据 

} else { 

$.selectreset(target.data(nextselect)); 

} 

}); 

}); 

}; 

})(jquery);

更多信息请查看IT技术专栏