微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

一个简单的jquery的多选下拉框(自写)_jquery

php中文网
发布： 2016-05-16 16:50:00
原创
1443人浏览过

今天做的项目要用到多选的下拉框，开始想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用jquery写了一个多选下拉框，js写得比较简洁。代码如下。

js代码

简单蓝色后台管理模板
简单蓝色后台管理模板

简单蓝色后台管理模板，蓝色风格，包含登录页面login.html及后台操作页面两个模板页面，后台操作页面是框架结构(Frame)布局，右侧下拉式导航菜单，设计上体现了对用户操作的考虑，是您开发一般后台的首选。有关于我们、新闻中心、产品中心、客户服务、经典案例、高级管理、系统管理、个人管理等系统功能菜单。

简单蓝色后台管理模板 555
查看详情 简单蓝色后台管理模板
复制代码 代码如下:

(function(){
$.fn.extend({
checks_select: function(options){
jq_checks_select = null;
$(this).click(function(e){
jq_check = $(this);
//jq_check.attr("class", "");
if (jq_checks_select == null) {
jq_checks_select = $("
").insertAfter(jq_check);
$.each(options, function(i, n){
check_div=$("
" + n + "
").appendTo(jq_checks_select);
check_box=check_div.children();
check_box.click(function(e){
//jq_check.attr("value",$(this).attr("value") );

temp="";
$("input:checked").each(function(i){
if(i==0){
temp=$(this).attr("value");
}else{
temp+="、"+$(this).attr("value");
}
});
jq_check.attr("value",temp);
e.stopPropagation();
});
});
}else{
jq_checks_select.toggle();

}
e.stopPropagation();
});
$(document).click(function () {
jq_checks_select.hide();
});
//$(this).blur(function(){
//jq_checks_select.css("visibility","hidden");
//alert();
//});
}
})

})(jQuery);

html
复制代码 代码如下:
















需要jquery类库
相关标签：
jquery

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：javascript生成随机颜色示例代码_javascript技巧 下一篇：借助javascript代码判断网页是静态还是伪静态_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Apache ECharts 标题样式：文本颜色与阴影效果的精确配置 本教程详细讲解如何在ApacheECharts中正确设置图表标题的文本颜色和阴影效果。核心在于利用textStyle属性控制标题文本颜色，并通过为标题区域设置backgroundColor来激活并显示阴影效果，确保标题样式按预期呈现，提升图表的可视化表现力。
2025-11-21 12:25:13
422
解决JavaScript动态修改图片src属性后图片不显示的问题 本教程旨在解决JavaScript动态修改标签src属性后图片无法显示的问题。核心原因通常是图片路径设置不正确。文章将详细阐述如何正确指定图片路径，并通过示例代码演示在HTML、CSS和JavaScript中协同工作，确保图片能够成功加载并显示。
2025-11-21 12:24:05
611
JavaScript类型数组_TypedArray操作指南 TypedArray是JavaScript中用于操作ArrayBuffer上特定类型数值的视图统称，包含Int8Array、Uint8Array等多种类型，常用于高性能场景如音视频处理。通过new关键字可创建指定长度或基于ArrayBuffer的实例，支持索引读写、遍历及set/slice等操作，但长度固定且不支持push/pop。多个TypedArray可共享同一buffer，需注意数据重叠影响。选择合适类型能提升性能，如Uint8ClampedArray用于像素，Float32Array用于
2025-11-21 12:20:39
359
解决使用 EAS BUILD 导致 iOS 应用启动崩溃的常见问题与策略 本教程旨在解决使用ExpoEASBUILD后iOS应用启动崩溃的问题。文章详细分析了导致此类崩溃的四个主要原因：导航库依赖缺失、环境变量配置不当、字体包未安装以及依赖版本不兼容。通过提供具体的解决方案和检查步骤，帮助开发者确保本地与构建环境的一致性，从而顺利发布应用。
2025-11-21 12:03:46
466
JavaScript记忆化_函数缓存与计算结果复用 记忆化是用空间换时间的优化策略，通过缓存函数输入与结果的映射，避免重复计算。适合纯函数、计算密集型且参数重复调用的场景，如递归、React的useMemo、API去重等。手动实现可用Map或WeakMap存储键值对，JSON.stringify生成键但需注意边界问题，对象参数推荐WeakMap防止内存泄漏。需警惕内存占用，可结合LRU控制缓存大小。
2025-11-21 11:58:41
993
动态管理复选框关联子项：基于AJAX和数据属性的解决方案 本文旨在解决多选框联动场景中，动态加载和移除子项的常见问题。通过引入数据属性（data-*）为子项标记所属父级，并结合AJAX请求与jQuery选择器，实现当父级复选框被选中时添加对应子项，取消选中时精确移除特定子项，避免不必要的全局清空操作，从而提升用户体验和页面交互的精准性。
2025-11-21 11:54:21
228
优化JavaScript点击动画：解决元素重复点击时的位置偏移问题 本教程旨在解决JavaScript点击动画中，元素在重复点击同一位置后发生偏移的常见问题。文章深入分析了event.target属性变化导致坐标计算错误的根源，并提供了两种解决方案：一是通过简化坐标计算并结合pointer-events:noneCSS属性，二是通过动态创建元素，确保动画元素始终在正确的点击位置出现，从而避免布局错乱并提升用户体验。
2025-11-21 11:26:28
712
JavaScript动态图片切换：解决图片路径不正确导致显示失败的问题 本教程旨在解决JavaScript动态修改标签src属性时，图片无法显示而只显示alt文本的常见问题。核心原因通常是JavaScript中设置的图片相对路径与实际文件结构不符。文章将通过一个交互式案例，详细演示如何正确构建和修正图片路径，并提供HTML、CSS及修正后的JavaScript代码，帮助开发者有效调试并确保动态加载的图片能够正确显示。
2025-11-21 11:09:24
253
实现可选择性拖拽与取消选中功能的教程 本教程详细介绍了如何构建一个交互式UI系统，实现对多个组件（widgets）的选择、区域选择和拖拽功能。核心在于优化mousedown事件处理逻辑，确保当用户点击或拖拽一个未选中的组件时，所有已选中的组件自动取消选中；而当点击或拖拽一个已选中的组件时，则允许所有当前选中的组件一同被拖拽，从而提供直观的用户体验。
2025-11-21 10:59:22
338
JavaScript点击动画：解决元素定位偏移的常见问题 本文深入探讨了在JavaScript点击动画中，当重复点击同一位置时，元素可能出现定位偏移的常见问题。通过分析事件对象e.target的变化如何影响坐标计算，我们揭示了导致动画元素意外移动的根本原因。教程提供了详细的解决方案，指导开发者如何利用e.clientX和e.clientY精确获取点击位置，从而确保动画元素始终在预期位置正确显示，避免重复点击时的定位错误。
2025-11-21 10:52:27
652
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部