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技術專欄