编程 Javascript

jQuery下拉框的简单应用

Posted in Javascript onJune 24, 2016

先看看效果图：

jQuery下拉框的简单应用

大家肯定都见过类似效果的网页，怎么实现的呢,代码很简单：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* { margin:0; padding:0; }
div.centent {
  float:left;
  text-align: center;
  margin: 10px;
}
span { 
 display:block; 
 margin:2px 2px;
 padding:4px 10px; 
 background:#898989;
 cursor:pointer;
 font-size:12px;
 color:white;
}
</style>
<!--  引入jQuery -->
<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 //移到右边
 $('#add').click(function() {
 //获取选中的选项，删除并追加给对方
 $('#select1 option:selected').appendTo('#select2');
 });
 //移到左边
 $('#remove').click(function() {
 $('#select2 option:selected').appendTo('#select1');
 });
 //全部移到右边
 $('#add_all').click(function() {
 //获取全部的选项,删除并追加给对方
 $('#select1 option').appendTo('#select2');
 });
 //全部移到左边
 $('#remove_all').click(function() {
 $('#select2 option').appendTo('#select1');
 });
 //双击选项
 $('#select1').dblclick(function(){ //绑定双击事件
 //获取全部的选项,删除并追加给对方
 $("option:selected",this).appendTo('#select2'); //追加给对方
 });
 //双击选项
 $('#select2').dblclick(function(){
  $("option:selected",this).appendTo('#select1');
 });
});
</script>

</head>
<body>
 <div class="centent">
 <select multiple="multiple" id="select1" style="width:100px;height:160px;">
  <option value="1">曹操</option>
  <option value="2">曹昂</option>
  <option value="3">曹丕</option>
  <option value="4">曹彰</option>
  <option value="5">曹植</option>
  <option value="6">曹熊</option>
  <option value="7">曹仁</option>
  <option value="8">曹洪</option>
  <option value="9">曹休</option>
  <option value="10">曹真</option>
  <option value="11">曹爽</option>
 </select>
 <div>
  <span id="add" >选中添加到右边>></span>
  <span id="add_all" >全部添加到右边>></span>
 </div>
 </div>
 <div class="centent">
 <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
  <option value="12">曹芳</option>
 </select>
 <div>
  <span id="remove"><<选中删除到左边</span>
  <span id="remove_all"><<全部删除到左边</span>
 </div>
 </div>
</body>
</html>

代码实现的功能：
1)、将选中的选项添加给对方

2)、将全部选项添加给对方

3)、双击某个选项将其添加给对方

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery下拉框的简单应用

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

不要小看注释掉的JS 引起的安全问题

Dec 27 Javascript

jquery更换文章内容与改变字体大小代码

Sep 30 Javascript

jQuery下的动画处理总结

Oct 10 Javascript

深入分析原生JavaScript事件

Dec 29 Javascript

jQuery 3.0 的 setter和getter 模式详解

Jul 11 Javascript

Node.js如何自动审核团队的代码

Jul 20 Javascript

jQuery实现ajax的叠加和停止(终止ajax请求)

Aug 08 Javascript

JS实现简单的天数计算器完整实例

Apr 28 Javascript

微信小程序自定义toast弹窗效果的实现代码

Nov 15 Javascript

详解vuex之store源码简单解析

Jun 13 Javascript

实现vuex与组件data之间的数据同步更新方式

Nov 12 Javascript

js实现蒙版效果

Jan 11 Javascript

浅谈json取值(对象和数组)

Jun 24 #Javascript

json对象与数组以及转换成js对象的简单实现方法

Jun 24 #Javascript

jQuery实现点击弹出背景变暗遮罩效果实例代码

Jun 24 #Javascript

JS控制文本域只读或可写属性的方法

Jun 24 #Javascript

jQuery插件扩展extend的简单实现原理

Jun 24 #Javascript

jQuery设置单选按钮radio选中/不可用的实例代码

Jun 24 #Javascript

jQuery给div,Span, a ，button, radio 赋值与取值

Jun 24 #Javascript