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 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 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
拼音码表的生成
2006/10/09 PHP
一个程序下载的管理程序(四)
2006/10/09 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JavaScript 事件系统
2010/07/22 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
Vue实现日历小插件
2019/06/26 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
原生JS实现相邻月份日历
2020/10/13 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
公司股东合作协议书
2014/09/14 职场文书
六年级小学生评语
2014/12/26 职场文书
员工辞职信怎么写
2015/02/27 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android