3kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法
自制Jquery樹形選擇插件.
對(duì)付各種樹形選擇(省市,分類..)90行Jquery代碼搞定,少說廢話直接上插件代碼。稍后介紹使用說明。是之前寫的一個(gè)插件的精簡(jiǎn)版。
1.Jquery插件代碼
(function (j) { j.fn.attrs = function (option) { var root = this, data = []; //默認(rèn)參數(shù) var def = { url: '/ajax/GetSort/', str: root.attr("str") || '0', handel: function (v) { return "<option value=" + v.id + ">" + v.type + "</option>" }, path: root.attr("val") || 0, sChar: ',', change: function (v) { } }; //參數(shù)合并 def = j.extend({}, def, option); //是否初始化 ispath() ? init() : create(def.str); //請(qǐng)求分類并選中 function create(id, o, v) { if (!id || parseInt(id) == -1) return o.nextAll().remove(); //創(chuàng)建select var select = j("<select></select>").hide(); _b(select); //添加到容器內(nèi) if (o) o.nextAll().remove(); root.append(select); //發(fā)起Ajax請(qǐng)求 j.ajax({ type: "GET", url: def.url, data: { id: id }, dataType: "json", cache: true, success: function (json) { datainit(select, json, v); } }) } function datainit(select, data, v) { _c(select, data).val(v || -1); if (select.children("option").length <= 1) { select.remove(); return; } else select.removeAttr("style"); } //判斷是否符合格式 function ispath() { return def.path && /^(\d{1,},)*\d{1,}$/.test(def.path) && def.path != '0,0,0'; } //創(chuàng)建值 function _v() { var v = new Array(), vtext = new Array(); v.push(0); root.children("select").each(function () { if (j(this).val() > 0) { v.push(j(this).val()); vtext.push(j(this).children("option[selected]").text()) } }) root.attr("val", v.join(',')); root.attr("vtext", vtext.join(">")); def.change(v); } //初始化 function init() { if (ispath()) { var list = def.path.split(def.sChar); for (var i in list) { create(list[i], null, list[++i]); } return; } alert("Error:分類出錯(cuò)!") } //綁定事件 function _b(select) { select.bind("change", function () { create(j(this).val(), j(this)); _v(); }) } //創(chuàng)建下拉框 function _c(select, data) { select.append(j("<option value='-1'>==請(qǐng)選擇==</option>")); for (var i = 0; i < data.length; i++) { select.append(j(def.handel(data[i]))); } return select; } } })($)
2.對(duì)付省市選擇
3.對(duì)付各種讓你蛋疼的無限級(jí)選擇
4.如何使用
<div id="attr"></div> <script type="text/javascript"> (function($){ $("#attr").attr( { url: '/ajax/GetSort/',//ajax 獲取的URL 服務(wù)器返回的是Json 數(shù)據(jù) str: root.attr("str") || '0',//獲取初始化的分類path.例如:23,45,90。在編輯的情況下能正確還原 handel: function (v) {//數(shù)據(jù)處理的回調(diào)函數(shù),表明如何對(duì)后臺(tái)數(shù)據(jù)進(jìn)行解析。 如[{id:32,type:"分類"}] return "<option value=" + v.id + ">" + v.type + "</option>" }, path: root.attr("val") || 0, sChar: ',',//path 拆分的字符如果,path 為23|45|90 則 ‘|' change: function (v) { }//選擇框修改處理事件 }; ); })(jQuery) </script>
以上這篇3kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能示例【拖動(dòng)div等任何標(biāo)簽】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)浮層功能,可實(shí)現(xiàn)拖動(dòng)div等任何標(biāo)簽的效果,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常,但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11jQuery調(diào)用Webservice傳遞json數(shù)組的方法
這篇文章主要介紹了jQuery調(diào)用Webservice傳遞json數(shù)組的方法,實(shí)例分析了jQuery基于ajax與Webservice傳遞json數(shù)據(jù)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果,通過調(diào)用自定義函數(shù)實(shí)現(xiàn)頁面tab切換及字體樣式同步變換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jquery分析文本里url或郵件地址為真實(shí)鏈接的方法
這篇文章主要介紹了jquery分析文本里url或郵件地址為真實(shí)鏈接的方法,涉及jQuery正則匹配與替換的相關(guān)技巧,需要的朋友可以參考下2015-06-06jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法
這篇文章主要介紹了jquery使整個(gè)div區(qū)域可以點(diǎn)擊的方法,涉及jQuery操作頁面元素與鼠標(biāo)事件的技巧,需要的朋友可以參考下2015-06-06Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說明與tableUI優(yōu)化
Jquery 插件學(xué)習(xí)實(shí)例1 插件制作說明與tableUI優(yōu)化,需要的朋友可以參考下。2010-04-04jQuery的實(shí)例及必知重要的jQuery選擇器詳解
下面小編就為大家?guī)硪黄猨Query的實(shí)例及必知重要的jQuery選擇器詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05