基于JQUERY的多级联动代码_jquery
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
方法名: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>

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

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

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

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

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

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

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

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

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

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

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