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

2024-12-17 14:49:40

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net 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>

运行效果：

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

jquery模拟SELECT下拉框取值效果

jquery模拟SELECT框,效果图如下: 复制代码代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>jquery模拟SELECT框</title> <meta charset="utf-8"> <style> body{padding:0;margin:0;font-size:12px;} ul,li{list-sty
用jQuery模拟select下拉框的简单示例代码

很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t
jquery 模拟类搜索框自动完成搜索提示功能(改进)

autopoint.js代码: 复制代码代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { defaults = { url:options.url, keyLeft : 37,//向左方向键 keyUp : 38,//向上方向键
用jQuery实现的模拟下拉框代码

很多群员问了关于下拉框美化的问题,现打一个下拉框美化的制作过程,其实是模拟出来的下拉框. 问题1:为什么要模拟下拉框? 1,浏览器自带的下拉框样式不好看. 2,在ie6下,下拉框的优先级大于层,经常导致下拉框显示在层的上面. OK,明白这个问题后,我们就开始用jQuery制作模拟下拉框. 第一步:先搭建好结构这是普通的下拉框代码: XML/HTML代码复制代码代码如下: <select name="abc" id="abc"> <optio
jQuery模拟12306城市选择框功能简单实现方法示例

本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <title>www.jb51.net jQuery城市选择框</title> <style> #parent{ width:500px; position:relative; } #text{ height:25px; } #select{ width:420px; hei
模拟多级复选框效果的jquery代码

今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这人很好做,代码如下: 复制代码代码如下: evtEle.parent().next(".checks").find("input:checkbox").a
jquery 模拟雅虎首页的点击对话框效果

这里说明下,这样的效果我们发过类似的效果.具体的可以到脚本下载中心查找. 效果图: 声明:我做的只是实现这个效果,在美观上并没有做到yahoo主页这么好看,所以不要介意! 原材料: 思路: 1:为每一个li标签添加悬浮事件 2:构建iframe并获取到当前li标签下的a元素的href属性值 3:构建DIV包含iframe元素并显示HTML结构: 复制代码代码如下: <ul> <Li><a href="http://www.google.cn">新闻
jQuery 文本框模拟下拉列表效果

网页代码如下: New Web Project $(document).ready(function(){ $('#test').val(''); //定义一个下拉按钮层,并配置样式(位置,定位点坐标,大小,背景图片,Z轴),追加到文本框后面 $DIV = $(' ').css('position', 'absolute').css('left', $('#test').position().left + $('#test').width() - 15 + 'px').css('top', $(
jQuery模拟下拉框选择对应菜单的内容

先给大家展示下效果图: 下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin
jquery模拟多级复选框效果的简单实例

今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c

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

相关推荐

随机推荐