首頁 web前端 js教程 基于JQUERY的多级联动代码_jquery

基于JQUERY的多级联动代码_jquery

May 16, 2016 pm 05:56 PM
多級聯動

jquery.select.more.js

复制代码 代码如下:

(function($){
$.fn.doselectmore = function(settings) {
var dfop ={
namekey: "name",
pnamekey: "name",
idkey: "id",
selectname:"sel",
method: "POST",
datatype: "json",
param:{},
pval:null,
chckval:null,
chckvalarry:null,
pname:false,
nname:false,
vl:0,
url: false,
data: false
};
$.extend(dfop, settings);
// alert(eobj(dfop));
var me = $(this);
if(!dfop.nname){
dfop.nname = (dfop.selectname+(dfop.vl+1));
}
if((!dfop.pname)&&dfop.vl>0){
dfop.pname = dfop.selectname+(dfop.vl-1);
}
if(!dfop.data){
if (dfop.url) {
var param = {};
$.ajax({
type: dfop.method,
url: dfop.url,
data: dfop.param,
dataType: dfop.datatype,
success: function(data){
dfop.data=data;
selectmorebuilder(me,dfop);
},
error:(function(request,status,err){
var errText = request.responseText;
var ErrMessage = "页面出现"+request.status+"错误信息, ";
ErrMessage += "错误内容为:"+request.statusText+"\n"+errText.substring(errText.indexOf("
")+5,errText.indexOf("
登入後複製
"));
alert(ErrMessage);
})
});
}
}else{
selectmorebuilder(me,dfop);
}
function selectmorebuilder(thisme,df) {
if(df.chckval!=null&&df.chckvalarry==null){
var pid=df.chckval;
var k=1;
df.chckvalarry = new Array();
df.chckvalarry.push(pid);
while(k>0){
k=0;
$.each(df.data, function(i, item){
if(item[df.idkey]==pid&&item[df.pnamekey]!=df.pval){
pid=item[df.pnamekey];
df.chckvalarry.unshift(pid);
k++;
}
});
}
}
// alert(eobj(df.chckvalarry));
var select = $("");
select.attr({
name:df.selectname+dfop.vl,
id:df.selectname+dfop.vl,
nname:df.nname,
pname:df.pname,
vl:df.vl
});
var sdiv = null;
if (dfop.vl == 0) {
sdiv = $("
");
thisme.after(sdiv).remove();
sdiv.append("");
sdiv.append(select);
sdiv.get(0).t=df;
}else{
thisme.removeselectmore();
sdiv = $("input[name="+df.selectname+"]").parent();
sdiv.append(select);
}
select.empty();
var counti = 0;
$.each(df.data, function(i, item){
if(item[df.pnamekey]==df.pval){
select.append("");
counti++;
}
});
if (counti == 0) {
select.remove();
}
else {
select.change(function(){
var nselect = $("#" + $(this).attr("nname"));
if (nselect.length == 0) {
nselect = $("");
sdiv.append(nselect);
}
nselect.doselectmore({
namekey: df.namekey,
pnamekey: df.pnamekey,
idkey: df.idkey,
selectname: df.selectname,
param: df.param,
pval: $(this).val(),
vl: df.vl + 1,
chckvalarry:sdiv.get(0).t.chckvalarry,
data: df.data
});
});
if(df.chckvalarry!=null){
if(df.chckvalarry.length>=df.vl)
select.val(df.chckvalarry[df.vl]);
}
if(df.vl==1&&df.chckvalarry!=null&&df.chckvalarry[1]!=select.val()){
var ddf = sdiv.get(0).t;
ddf.chckvalarry=null;
ddf.chckval=null;
sdiv.get(0).t=ddf;
}
select.change();
$("input[type=hidden][name="+df.selectname+"]").val($("input[type=hidden][name="+df.selectname+"]").getselectmoreval());
}
}
};
$.fn.getselectmoreval = function(){
var me = $(this);
if(me.size()==0) return;
var sdiv = me.parent();
if(sdiv.size()==0) return;
var df = sdiv.get(0).t;
var nselect = $("#" + df.selectname+df.vl);
var v = null;
while(nselect.size()>0){
v = nselect.val();
nselect = $("#" +nselect.attr("nname"));
}
return v;
};
$.fn.setselectmoreval = function(idv){
var me = $(this);
if(me.size()==0) return;
var sdiv = me.parent();
if(sdiv.size()==0) return;
var df = sdiv.get(0).t;
df.chckval=idv;
if(idv!=null){
var pid=df.chckval;
var k=1;
df.chckvalarry = new Array();
df.chckvalarry.push(pid);
while(k>0){
k=0;
$.each(df.data, function(i, item){
if(item[df.idkey]==pid&&item[df.pnamekey]!=df.pval){
pid=item[df.pnamekey];
df.chckvalarry.unshift(pid);
k++;
}
});
}
}
sdiv.get(0).t=df;
var nselect = $("#" + df.selectname+df.vl);
nselect.val(df.chckvalarry[0]);
nselect.change();
};
$.fn.removeselectmore = function(){
if($(this).attr("nname")!=null){
$("#"+$(this).attr("nname")).removeselectmore();
}
$(this).remove();
};
})(jQuery);

help.html
复制代码 代码如下:












Insert title here


方法名:doselectmore

用途:实例化一个对象为多选框

例子:html
 <br><!--head--> <br><script src="jquery.select.more.js" type="text/javascript"></script> <br><!--body--> <br><input type="text" name="illegbasinfo"> <br>
登入後複製

js:
 <br>/** <br>一下※为必填项,★为二选一,?为不是必须 <br>※namekey: 数据类型显示名称, <br>※pnamekey: 数据上级主键名称, <br>※idkey: 数据主键名称, <br>※selectname: 选择框名称, <br>※pval:第一级别上级节点值, <br>?chckval:默认选择, <br>★url: false, <br>?param:url使用时传入参数, <br>★data: false <br>**/ <br>$("input[name=illegbasinfo]").doselectmore({ <br>url:'../../../abc/dic/illbasinfo/loadall.do', <br>pval:0, <br>namekey: "illegbasinfo", <br>pnamekey: "parillegbasid", <br>idkey: "illegbasinfoid", <br>selectname:"illegbasinfo" <br>}); <br>
登入後複製

方法名:doselectmore

用途:得到选中对象值

例子:js:
 <br>$("input[name=test1]").click(function(){ <br>alert($("input[name=illegbasinfo]").getselectmoreval()); <br>}); <br>
登入後複製

方法名:setselectmoreval(val)

用途:为多选框设置值

例子:js:
 <br>$("input[name=test2]").click(function(){ <br>$("input[name=illegbasinfo]").setselectmoreval(347); <br>}); <br>
登入後複製



本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1659
14
CakePHP 教程
1416
52
Laravel 教程
1310
25
PHP教程
1258
29
C# 教程
1232
24
如何使用Vue和Element-UI實現多級聯動下拉框功能 如何使用Vue和Element-UI實現多級聯動下拉框功能 Jul 20, 2023 pm 11:43 PM

如何使用Vue和Element-UI實作多級連動下拉框功能引言:在Web開發中,多級聯動下拉框是一種常見的互動方式。選擇下拉框的選項,可以動態改變後續下拉框的內容。本文將介紹如何使用Vue和Element-UI來實現此功能,並提供程式碼範例。一、準備工作首先,我們需要確保已經安裝好Vue和Element-UI。可以透過以下命令進行安裝:npmins

如何在Java中處理表單資料的多級連動和資料聯合查詢? 如何在Java中處理表單資料的多級連動和資料聯合查詢? Aug 10, 2023 am 11:45 AM

如何在Java中處理表單資料的多級連動和資料聯合查詢?在網路應用程式開發中,表單資料的多級連動和資料聯合查詢是非常常見的需求。 Java作為一種廣泛應用的程式語言,在處理這些需求時提供了豐富的功能和工具。本文將介紹如何在Java中處理表單資料的多重連結和資料聯合查詢,並提供對應的程式碼範例。一、多級連動多級聯動是指當使用者選擇一級下拉框的選項時,下一級的下拉框內容會

Vue 中如何實現多級連動選單? Vue 中如何實現多級連動選單? Jun 25, 2023 pm 07:37 PM

Vue.js是一個流行的前端框架,許多網站都使用Vue.js來開發互動式UI。其中一個常見的UI元件是多級連動選單(也稱為級聯選擇器),它允許用戶透過選擇一個選項來過濾另一個選項的列表,從而實現更精細的搜尋或導航功能。在這篇文章中,我們將介紹如何使用Vue.js實作一個多級連動選單。準備工作在開始之前,我們需要確保我們已經安裝了Vue.js。

Vue元件開發:多級連動選擇器實現 Vue元件開發:多級連動選擇器實現 Nov 24, 2023 am 08:36 AM

Vue元件開發:多級連動選擇器實作在前端開發中,多級連動選擇器是一個常見的需求,例如省市區選擇、年月日選擇等。本文將介紹如何使用Vue元件實作多級連動選擇器,並附有具體的程式碼實作範例。如何實現多級連動選擇器?實作多級連動選擇器需要用到Vue的元件化開發思想,將一個大的選擇器拆分為若干個子元件,分別負責渲染每個等級的選項。在每次等級的選擇變更時,都要更新後續

Vue3和Element-Plus如何實現多級聯動 Vue3和Element-Plus如何實現多級聯動 Apr 07, 2025 pm 07:48 PM

直接用 Element-Plus 的 Select 組件嵌套實現多級聯動,雖然方便,但效率堪憂。核心在於如何在數據層高效管理和更新數據,使用遞歸函數處理數據,並用 ref 管理選擇狀態。注意異步操作、數據一致性、錯誤處理和加載狀態提示等細節,代碼只是工具,重要的是設計能力和性能敏感度。

使用uniapp實現多級連動選擇器效果 使用uniapp實現多級連動選擇器效果 Nov 21, 2023 am 10:25 AM

使用Uniapp實現多級連動選擇器效果一、介紹多級連動選擇器是一種常見的互動效果,在許多應用場景中都能看到。在Uniapp中,我們可以利用它提供的元件和API,輕鬆實現這種效果。本文將介紹如何使用Uniapp實作多級連動選擇器,並提供具體的程式碼範例。二、準備工作在開始實作之前,我們需要準備以下工作:安裝Uniapp開發環境,包括Node.js、HBuilde

Java實作多級連動表單的動態載入與更新 Java實作多級連動表單的動態載入與更新 Aug 07, 2023 pm 05:13 PM

Java實作多級連動表單的動態載入與更新背景:在開發網頁應用程式時,經常會遇到需要實作多級連動表單的場景,例如省市縣三級連動的選擇。在這樣的表單中,當使用者選擇上級選項後,下級選項會根據使用者的選擇自動載入並更新。這種功能能夠有效減少使用者的輸入工作量,提高使用者體驗。本文將使用Java語言示範如何透過動態載入和更新來實現多級連動表單。實現想法:定義資料模型:首先需要

Vue和Element-UI級聯下拉框案例教程 Vue和Element-UI級聯下拉框案例教程 Apr 07, 2025 pm 08:03 PM

Vue和Element-UI中的級聯選擇器不僅僅處理父子關係,而是一個樹形數據結構。通過精心的數據設計,可以實現省市縣多級聯動等複雜場景。異步加載時,注意性能優化,例如使用虛擬滾動、緩存和防抖/節流技術。為了代碼質量,應注重可讀性、可維護性和性能。

See all articles