首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
webkit
yarn
react
上传
iframe
base64
requirejs
label
checkbox
jquery
正则
微信开发
v8
build
listview
ajax
chart
console
layout
focus
charts
js
javascript
scroll
vue
chart.js
cookies
hover
chrome
scheme
npm
dialog
button
bootstrap
vue.js
html
textview
json
overflow
firefox
dom
postman
view
hybrid
jq
html5
node.js
css
firebug
css3
icons
当前位置:
开发笔记
>
前端
> 正文
jQuery实现的多选框多级联动插件
作者:mobiledu2502910337 | 来源:互联网 | 2022-10-13 13:39
这篇文章主要介绍了jQuery实现的多选框联动插件,需要的朋友可以参考下
jQuery 实现的多选框联动插件
代码如下:
// 使用:$(_event_src_).autoSelect(_reload_, reload_url);
// 前台用get方法传输
标签的属性"name"和选中
的属性"value"
// 后台用json格式传输数据
// 格式: { value:
的属性"value", text:
的显示文本 }
(function($) {
$.fn.extend({
autoSelect: function(dest, url) {
return this.each(function() {
$.SelectChange($(this), $(dest), url);
});
},
});
// 重置复选框
$.SelectReset = function(target) {
if (target != null) {
$.SelectReset(target.data("nextSelect"));
target.empty();
target.append(target.data("defaultOpt"));
}
};
// 加载复选框
$.SelectLoad = function(target, data) {
$.each(data, function(index, content) {
var option = $("
")
.attr("value", content.value).text(content.text);
target.append(option);
});
};
// 绑定 change 事件
$.SelectChange = function(target, dest, url) {
// 绑定联动链
target.data("nextSelect", dest);
// 记录默认选项(first option)
if (target.data("defaultOpt") == null)
target.data("defaultOpt", target.children().first());
dest.data("defaultOpt", dest.children().first());
$(document).ready(function() {
target.change(function(event) {
var _target = event.target || window.event.srcElement;
if (_target.value != target.data("defaultOpt").attr("value")) {
$.getJSON(url, {
"name": _target.name,
"value": _target.value
}, function(data, status) {
if (status == "success") {
$.SelectReset(target.data("nextSelect"));
$.SelectLoad(target.data("nextSelect"), data);
}
}); // 后台以 json 格式传输数据
} else {
$.SelectReset(target.data("nextSelect"));
}
});
});
};
})(jQuery);
jquery
json
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
js
深入解析ES6至ES8的新特性与应用
本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ...
[详细]
蜡笔小新 2024-12-17 12:11:23
ajax
ThinkPHP6多数据库部署指南
本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ...
[详细]
蜡笔小新 2024-12-17 18:59:28
scheme
Spring Cloud Config 使用 Vault 作为配置存储
本文探讨了如何在Spring Cloud Config中集成HashiCorp Vault作为配置存储解决方案,基于Spring Cloud Hoxton.RELEASE及Spring Boot 2.2.1.RELEASE版本。文章还提供了详细的配置示例和实践建议。 ...
[详细]
蜡笔小新 2024-12-18 16:40:26
scheme
在线JSON格式化与编辑工具
提供便捷的在线服务,用于JSON数据的查看、编辑和格式化,适合开发者和数据处理人员使用。 ...
[详细]
蜡笔小新 2024-12-18 14:24:40
js
Laravel框架下实现微信支付PC端及内置浏览器支持
本文介绍如何在Laravel框架中集成微信支付功能,包括如何配置微信支付环境、处理支付请求及接收支付回调等关键步骤。 ...
[详细]
蜡笔小新 2024-12-18 13:56:54
js
Python数据类型6 字典
字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包 ...
[详细]
蜡笔小新 2024-12-18 13:47:23
js
微信小程序中实现位置获取的全面指南
本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ...
[详细]
蜡笔小新 2024-12-18 10:41:24
label
Kubernetes 中 kubectl 的核心命令与操作指南
本文详细介绍了 Kubernetes 集群管理工具 kubectl 的基本使用方法,涵盖了一系列常用的命令及其应用场景,旨在帮助初学者快速掌握 kubectl 的基本操作。 ...
[详细]
蜡笔小新 2024-12-18 09:41:33
js
Web与游戏开发的主要差异
本文探讨了Web开发与游戏开发之间的主要区别,旨在帮助开发者更好地理解两种开发领域的特性和需求。文章基于作者的实际经验和网络资料整理而成。 ...
[详细]
蜡笔小新 2024-12-18 08:26:30
js
优化后的电影渲染与Service Worker注册
本文介绍了一个优化过的JavaScript函数,用于从API获取电影信息并渲染到网页上,同时注册Service Worker以提升用户体验和性能。 ...
[详细]
蜡笔小新 2024-12-17 17:42:51
js
使用 com.badlogic.gdx.utils.JsonValue.iterator() 方法解析 JSON 数据
本文详细介绍了如何在 Java 中使用 com.badlogic.gdx.utils.JsonValue.iterator() 方法来遍历和解析 JSON 数据,并提供了多个实际应用中的代码示例。 ...
[详细]
蜡笔小新 2024-12-17 16:32:58
js
在Node.js中利用SOCKS5代理进行HTTP请求
本文探讨了如何在Node.js环境中,通过Tor网络使用的SOCKS5代理执行HTTP请求。文中不仅提供了基础的实现方法,还介绍了几种常用的库和工具,帮助开发者解决遇到的问题。 ...
[详细]
蜡笔小新 2024-12-17 15:05:06
focus
Spring Boot 解决 AJAX 跨域请求及自定义 Headers 方法
本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ...
[详细]
蜡笔小新 2024-12-17 13:57:01
js
javascript 常用方法1
js常用方法(1)startWithJava代码varstartsWithfunction(str,regex){if(regexundefined||strundefined|| ...
[详细]
蜡笔小新 2024-12-17 10:38:40
js
Scrapy中的信号机制
本文档详细介绍了Scrapy框架中的信号系统,包括如何利用信号来增强爬虫的功能性和灵活性,以及各个内置信号的具体用途和参数。 ...
[详细]
蜡笔小新 2024-12-16 21:00:06
mobiledu2502910337
这个家伙很懒,什么也没留下!
Tags | 热门标签
webkit
yarn
react
上传
iframe
base64
requirejs
label
checkbox
jquery
正则
微信开发
v8
build
listview
ajax
chart
console
layout
focus
charts
js
javascript
scroll
vue
chart.js
cookies
hover
chrome
scheme
RankList | 热门文章
1
利用Redis HyperLogLog高效统计微博日活跃和月活跃用户数
2
教育类应用程序:提升学习效率的专业工具
3
浏览器中 W3School JavaScript 的 Location 对象详解
4
如何重置路由器配置:全面指南以恢复出厂设置
5
在JavaScript中找不到该语句,如何有效进行搜索?
6
根据不同环境使用 Vue CLI 进行打包配置优化
7
利用ViewComponents在Asp.Net Core中构建高效分页组件
8
论文解读:空间变换网络及其代码解析
9
深入解析野指针:你是否真正掌握了它的本质与危害?
10
深入学习 Python 中的 xlrd 模块:掌握 Excel 文件读取技巧
11
关于C语言特性描述中的常见误区,哪些说法是不正确的?
12
全面指南:Red Hat Enterprise Linux 6 中的 Ext3 文件系统详解
13
Linux 用户通常采用哪些方法来建立安全的 VPN 连接?
14
SQL Server 2008 默认端口 5432 的详细解析与安全配置建议
15
实现 Silverlight 应用程序中的多窗口功能
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有