jquery實現的多選框多級聯(lián)動插件
來源:易賢網 閱讀:650 次 日期:2014-09-11 11:54:59
溫馨提示:易賢網小編為您整理了“jquery實現的多選框多級聯(lián)動插件”,方便廣大網友查閱!

jquery 實現地多選框聯(lián)動插件

代碼如下:

// 使用:$(_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) {

// 綁定聯(lián)動鏈

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

更多信息請查看網頁制作

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權所有:易賢網