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图片放大镜效果
Jun 23 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现放大镜案例
Oct 19 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
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jquery横向纵向鼠标滚轮全屏切换
2017/02/27 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Python数据类型之List列表实例详解
2019/05/08 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
在校学生证明格式
2015/06/24 职场文书
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL