基于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中处理表单数据的多级联动和数据联合查询?在Web应用开发中,表单数据的多级联动和数据联合查询是非常常见的需求。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

如何在 Vue 中使用 Element-UI 实现多级联动下拉框?使用多个 El-Select 组件,通过 v-model 绑定数据,并使用逻辑控制选项的动态变化。使用一个递归函数,高效地生成并更新选项列表,根据选择结果动态更新后续下拉框的选项。注意数据结构的设计,清晰的数据结构可以简化代码逻辑。考虑数据量大时的性能问题,使用树形结构或虚拟滚动技术优化渲染。处理错误情况,避免程序崩溃。注重代码的可读性和可维护性,使用有意义的变量名、添加注释,并将代码拆分成小的、可重用的函数。

Vue和Element-UI中的级联选择器不仅仅处理父子关系,而是一个树形数据结构。通过精心的数据设计,可以实现省市县多级联动等复杂场景。异步加载时,注意性能优化,例如使用虚拟滚动、缓存和防抖/节流技术。为了代码质量,应注重可读性、可维护性和性能。
