首页 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教程
1664
14
CakePHP 教程
1421
52
Laravel 教程
1316
25
PHP教程
1266
29
C# 教程
1239
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中处理表单数据的多级联动和数据联合查询?在Web应用开发中,表单数据的多级联动和数据联合查询是非常常见的需求。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

Vue和Element-UI多级联动下拉框实现方法 Vue和Element-UI多级联动下拉框实现方法 Apr 07, 2025 pm 09:06 PM

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

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

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

See all articles