jQuery模拟html下拉多选框的原生实现方法示例


Posted in jQuery onMay 30, 2019

本文实例讲述了jQuery模拟html下拉多选框的原生实现方法。分享给大家供大家参考,具体如下:

用js, html, css 简单的实现一个HTML 下拉多选框,不试用其他框架的情况下,可以借鉴一下,如果用jqueryUI, BOOTSTRAP, 就没必要参考了。毕竟那些现成的东西更好用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery模拟select</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <style>
 body {
 font: normal 14px/100% "Andale Mono", AndaleMono, monospace;
 color: #fff;
 padding: 50px;
 width: 300px;
 margin: 0 auto;
 background-color: #374954;
}
.dropdown {
 position: absolute;
 top:50%;
 transform: translateY(-50%);
}
a {
 color: #fff;
}
.dropdown dd,
.dropdown dt {
 margin: 0px;
 padding: 0px;
}
.dropdown ul {
 margin: -1px 0 0 0;
}
.dropdown dd {
 position: relative;
}
.dropdown a,
.dropdown a:visited {
 color: #fff;
 text-decoration: none;
 outline: none;
 font-size: 12px;
}
.dropdown dt a {
 background-color: #4F6877;
 display: block;
 padding: 8px 20px 5px 10px;
 min-height: 25px;
 line-height: 24px;
 overflow: hidden;
 border: 0;
 width: 272px;
}
.dropdown dt a span,
.multiSel span {
 cursor: pointer;
 display: inline-block;
 padding: 0 5px 2px 0;
}
.dropdown dd ul {
 background-color: #4F6877;
 border: 0;
 color: #fff;
 display: none;
 left: 0px;
 padding: 2px 15px 2px 5px;
 position: absolute;
 top: 2px;
 width: 240px;
 list-style: none;
 height: auto;
 overflow: auto;
 margin-top:30px;
}
.dropdown span.value {
 display: none;
}
.dropdown dd ul li a {
 padding: 5px;
 display: block;
}
.dropdown dd ul li a:hover {
 background-color: #fff;
}
button {
 background-color: #6BBE92;
 width: 302px;
 border: 0;
 padding: 10px 0;
 margin: 5px 0;
 text-align: center;
 color: #fff;
 font-weight: bold;
}
 </style>
</head>
<body>
<dl class="dropdown">
 <dt>
 <div style="">
  <div class="multiSel" style="width:150px;background:#fff;padding: 8px 20px 5px 10px;height:20px;color:#000;float:left;"></div>
  <div class="mydropdown" style="width:50px;background:#fff;padding: 8px 20px 5px 10px;height:20px;color:#000;float:left;">sss</div>
 </div>
 </dt>
 <dd>
  <div class="mutliSelect">
   <ul>
    <li>
     <input type="checkbox" value="Apple" />Apple</li>
    <li>
     <input type="checkbox" value="Blackberry" />Blackberry</li>
    <li>
     <input type="checkbox" value="HTC" />HTC</li>
    <li>
     <input type="checkbox" value="Sony Ericson" />Sony Ericson</li>
    <li>
     <input type="checkbox" value="Motorola" />Motorola</li>
    <li>
     <input type="checkbox" value="Nokia" />Nokia</li>
   </ul>
  </div>
 </dd>
</dl>
<script>
 $(".dropdown dt .mydropdown").on('click', function() {
  $(".dropdown dd ul").slideToggle('fast');
 });
$(".dropdown dd ul li a").on('click', function() {
 $(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
 return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
 var $clicked = $(e.target);
 if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});
$('.mutliSelect input[type="checkbox"]').on('click', function() {
 var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
 title = $(this).val() + ",";
 if ($(this).is(':checked')) {
 var html = '<span title="' + title + '">' + title + '</span>';
 $('.multiSel').append(html);
 } else {
 $('span[title="' + title + '"]').remove();
 }
});
 </script>
</body>
</html>

运行效果:

jQuery模拟html下拉多选框的原生实现方法示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHPCMS的使用小结
2010/09/20 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
angular4 JavaScript内存溢出问题
2018/03/06 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python的形参和实参使用方式
2019/12/24 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python 爬取小说并下载的示例
2020/12/07 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
Python中如何定义一个函数
2016/09/06 面试题
事业单位辞职信范文
2014/01/19 职场文书
优秀大学生申请书
2019/06/24 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python
Golang流模式之grpc的四种数据流
2022/04/13 Golang