蜗小牛
- 浏览: 63286 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
script代码：
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1 option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2 option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
var str="你选择的是：";
$("#select2 option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Apple devices fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Apple devices fullscreen -->
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>用户管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Bootstrap responsive -->
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<!-- Theme CSS -->
<link rel="stylesheet" href="css/style.css" >
<!-- Color CSS -->
<link rel="stylesheet" href="css/themes.css" >
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js" tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" ></script>
<!--[if lte IE 9]>
<script src="js/plugins/placeholder/jquery.placeholder.min.js" tppabs="http://www.eakroko.de/flat/js/plugins/placeholder/jquery.placeholder.min.js"></script>
<script>
$(document).ready(function() {
$('input, textarea').placeholder();
});
</script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Apple devices Homescreen icon -->
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1 option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2 option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
var str="你选择的是：";
$("#select2 option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
</head>
<body>
<div class="container-fluid" style="margin-top:100px;">
<div class="row-fluid">
<div class="span5 text-right">
<select multiple="multiple" id="select1">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
</div>
<div class="span2 text-center">
<div class="row-fluid">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-right " ></i><span id="add">选中右移</span></a>
</div>
</div>
<div class="row-fluid" style="margin-top:5px;">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-left " ></i><span id="remove">选中左移</span></a>
</div>
</div>
</div>
<div class="span5">
<select multiple="multiple" id="select2">
</select>
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<input type="button" class="btn btn-primary" id="send" value="提 交"/>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1 option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2 option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
var str="你选择的是：";
$("#select2 option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Apple devices fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Apple devices fullscreen -->
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>用户管理</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" >
<!-- Bootstrap responsive -->
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" >
<!-- Theme CSS -->
<link rel="stylesheet" href="css/style.css" >
<!-- Color CSS -->
<link rel="stylesheet" href="css/themes.css" >
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<!-- jQuery -->
<script src="js/jquery.min.js" tppabs="http://www.eakroko.de/flat/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" ></script>
<!--[if lte IE 9]>
<script src="js/plugins/placeholder/jquery.placeholder.min.js" tppabs="http://www.eakroko.de/flat/js/plugins/placeholder/jquery.placeholder.min.js"></script>
<script>
$(document).ready(function() {
$('input, textarea').placeholder();
});
</script>
<![endif]-->
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.ico" />
<!-- Apple devices Homescreen icon -->
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<script type="text/javascript">
$(document).ready(function(){
$("#add").click(function(){
$("#select1 option:selected").appendTo("#select2");
});
$("#remove").click(function(){
$("#select2 option:selected").appendTo("#select1");
});
//双击选项的时候实现右移,双击事件：dblclick
$("#select1").dblclick(function(){
$("#select1 option:selected").appendTo("#select2");
});
//双击选项的时候实现左移,双击事件：dblclick
$("#select2").dblclick(function(){
$("#select2 option:selected").appendTo("#select1");
});
//点击提交按钮查看所选内容
$("#send").click(function(){
var str="你选择的是：";
$("#select2 option").each(function(){
str+=$(this).val()+",";//接收显示所选复选框的内容
});
alert(str);
});
});
</script>
</head>
<body>
<div class="container-fluid" style="margin-top:100px;">
<div class="row-fluid">
<div class="span5 text-right">
<select multiple="multiple" id="select1">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
</div>
<div class="span2 text-center">
<div class="row-fluid">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-right " ></i><span id="add">选中右移</span></a>
</div>
</div>
<div class="row-fluid" style="margin-top:5px;">
<div class="span12">
<a class="btn" href="#"><i class=" icon-arrow-left " ></i><span id="remove">选中左移</span></a>
</div>
</div>
</div>
<div class="span5">
<select multiple="multiple" id="select2">
</select>
</div>
</div>
<div class="row-fluid">
<div class="span12 text-center">
<input type="button" class="btn btn-primary" id="send" value="提 交"/>
</div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1263<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 619CSS的伪类语法和别的语 ... -
html之marquee详解
2014-03-28 10:07 645该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19081。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1945浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 769有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1226<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 654对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1926开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 593进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 956<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 577■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 446<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 549很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1005CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 508定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1229{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 602<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 780所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ... -
如何在页面中设置IE浏览器的文档模式
2013-08-04 12:58 1106如何在页面中设置IE浏 ...
相关推荐
4. **Ajax交互**：如果下拉菜单的选项需要从服务器动态获取，jQuery的`.ajax()`函数可以方便地实现异步数据请求。这使得菜单内容能在用户交互时实时更新，提高用户体验。 5. **响应式设计**：为了适应不同屏幕尺寸...
本文将深入探讨“jQuery搜索框插件下拉菜单选择代码”这一主题，帮助开发者理解如何利用jQuery实现搜索框与下拉菜单的交互功能，包括多选条件和搜索功能。 首先，我们要了解这个插件的基本工作原理。当用户在输入框...
总的来说，这个项目提供了一个实用的工具，帮助开发者在移动设备上创建交互式的下拉菜单，通过jQuery简化了实现过程，同时兼顾了触控操作和视觉体验。通过深入理解并运用这些技术，可以为移动应用或网站增加更多互动...
下拉菜单在网页设计和应用程序开发中是一种常见的交互元素，用于提供多个选择项，并通过点击主菜单项展开显示。在本资源包“下拉菜单集合”中，包含了多种类型的下拉菜单，包括二级和三级下拉菜单，这些设计通常用于...
在创建动态选项卡菜单时，jQuery的主要作用在于监听用户交互，如点击事件，然后根据这些事件改变页面状态，比如显示或隐藏相应的菜单内容。 CSS3是CSS的最新版本，提供了许多新的样式和动画功能。在选项卡切换中，...
因此，开发者通常会使用jQuery和CSS来构建一个自定义的下拉菜单，以实现更美观和交互性更强的效果。 要创建一个jQuery自定义下拉菜单，我们需要以下步骤： 1. **基础HTML结构**：创建一个包含`<option>`元素的`...
例如，当用户点击一个按钮时，下拉菜单滑动出现；再次点击，它则滑动隐藏。这可以通过`slideDown`和`slideUp`方法实现。 此外，还可以考虑使用插件如Select2或Chosen，它们提供了更丰富的下拉选择功能，如搜索、...
"jquery适用于移动端的选择银行下拉菜单代码"是一个专为手机和平板等移动设备优化的交互组件，它利用jQuery库来实现一个高效的、易用的银行选择下拉菜单。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...
下拉菜单通常由一个可点击的按钮或文字触发，展开后显示一系列相关选项。在网页设计中，下拉菜单的应用广泛，包括导航菜单、表单选择、设置选项等。 1. **下拉菜单类型** - 单选下拉菜单：用户只能从提供的选项中...
例如，当用户点击下拉按钮时，显示下拉菜单；选择一个选项后，更新select元素的值并关闭菜单。 4. **响应式设计**: 美化的下拉菜单应具有良好的响应式设计，以适应不同设备和屏幕尺寸。这可能涉及到媒体查询（media...
当用户点击某个单选按钮时，我们可以检测其选中状态，并根据状态更改文本域和下拉菜单的`disabled`属性。`disabled`属性为`true`时，元素将变为只读，用户无法编辑；反之，如果`disabled`为`false`，则元素可被编辑...
该代码主要利用jQuery实现了下拉菜单和Tab切换的结合。下拉菜单是一种常见的导航结构，通常用于节省页面空间并提供层次化的导航选项。Tab切换则是通过点击不同的Tab按钮来展示或隐藏相应的内容区域，使用户能快速...
在ASP.NET Web应用中，可能还需要使用CSS来控制菜单的样式，以及JavaScript或jQuery来实现下拉菜单的动态行为，如展开和折叠子菜单。 7. **异步加载**： 对于大型数据集，考虑使用异步加载技术，只有在用户展开...
在这个特效中，jQuery将用于处理用户与下拉菜单的交互，如点击、展开和选择等事件。 接着，CSS3的引入是为了实现视觉上的美化。CSS3提供了许多新的选择器、伪类和动画效果，可以创建出动态且富有吸引力的界面。在...
本项目聚焦于一个基于jQuery的下拉多级树选择插件，该插件具备左右移动功能和模糊搜索特性，极大地提高了用户在下拉列表中的操作效率。 首先，我们来深入理解这个插件的核心特点： 1. **多级树结构**：此插件能够...
《jQuery实现分类下拉搜索框详解》 在网页开发中，提供用户友好的搜索功能是提升用户体验的关键之一。本文将详细解析如何利用jQuery技术构建一个分类下拉搜索框，以帮助用户快速找到所需的商品或信息。这个功能是...
- JavaScript / jQuery：JavaScript用于添加动态行为，如响应用户的点击事件，展开和收起下拉菜单。jQuery是一个流行的JavaScript库，简化了DOM操作和事件处理。 3. 框架与库： - Bootstrap：Bootstrap提供了一套...
下拉树jQuery是一种在网页交互设计中常用的组件，它结合了下拉菜单和树形结构的特点，能够以更直观、节省空间的方式展示层次化的数据。在网页开发中，特别是需要处理多级分类或者层级关系时，下拉树jQuery组件特别...
"下拉菜单（仿select）" 提供了一种解决方案，它通过CSS和jQuery实现了一个自定义样式的下拉菜单，不仅保持了基本的下拉功能，还允许开发者根据自己的设计风格进行定制，包括添加图片等元素。 首先，我们来理解这个...
本资源"jQuery下拉框菜单选中插件.zip"就是一个实例，展示了如何利用jQuery和CSS来创建一个高效、美观的下拉菜单。这个插件不仅可以提升网站的视觉吸引力，还能优化用户在浏览和操作菜单时的体验。 首先，jQuery的$...