双下拉框要实现的效果，实际上就是左边下拉选择框里的内容，可以添加到右边，而右边同理。写了个简单的例子，来说明一下.

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPEhtml>
<html>
<head>
<title>jquery之双下拉框</title>
<styletype="text/css">
.select1{ width:200px; min-height:150px;}
.select2{ width:200px; min-height:150px; margin-left:20px;}
.btn{ margin-top:20px; }
</style>
</head>
<body>
<selectclass="select1"multiple="multiple">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
</select>
<selectclass="select2"multiple="multiple">
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
</select>
<divclass="btn">
    <buttonclass="btn_add">右移>></button>
    <buttonclass="btn_delete"><<左移</button>
</div>
<scriptsrc="js/jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $(".btn_add").click(function(){
        $(".select1 option:selected").appendTo(".select2");
    });
    $(".btn_delete").click(function(){
        $(".select2 option:selected").appendTo(".select1");
    });
})
</script>
</body>
</html>

其实要实现这个功能，只需要用到appendTo()这个方法。它的用处就是在被选元素的结尾添加内容。

一般，下拉框都是单选，但是加上“multiple”这个属性，就可以同时多选。

我们还可以结合ajax循环遍历数据，来进行动态的添加删除。

本文永久地址：http://blogs.zmit.cn/5155.html
本文出自 中梦科技博客 ，转载时请注明出处及相应链接。

jQuery之双下拉框的更多相关文章

  1. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  2. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  3. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  4. JQuery操作select下拉框

    JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...

  5. jquery Combo Select 下拉框可选可输入插件

    Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式.Combo Select 能够对选项进行 ...

  6. Jquery制作--美化下拉框

    平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div ...

  7. jQuery Ajax MVC 下拉框联动

    无刷新下拉框联动方法: Controllers代码 public JsonResult DH_Change(string DH_ID) { List<SelectListItem> Tea ...

  8. Jquery学习笔记：利用jquery获取select下拉框的值

    jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class= ...

  9. jquery 匹配select下拉框与列表框

    今天工作中用到 GrapyCity 的 wijmo ui 控件. 要给系统中所有类型的控件加统一样式 用法 $("input [type='text']").wijtext(); ...

随机推荐

  1. ORA-03113：通信通道的文件结尾

    问题: 用命令startup启动实例时,报错“ORA-03113:通信通道的文件结尾”. 解决: SQL> startup mount ORACLE 例程已经启动. Total System G ...

  2. TCP阻塞模式开发

    在阻塞模式下,在IO操作完成前,执行的操作函数将一直等候而不会立刻返回,该函数所在的进程会阻塞在这里.相反,在非阻塞模式下,套接字函数会立即返回,而不管IO是否完成,该函数所在的线程将继续运行.阻塞模 ...

  3. Hadoop2.0构成之HDFS2.0

    HDFS2.0之HA 主备NameNode: 1.主NameNode对外提供服务,备NameNode同步主NameNode元数据,以待切换: 2.主NameNode的信息发生变化后,会将信息写到共享数 ...

  4. Hadoop2.0的基本构成总览

    Hadoop1.x和Hadoop2.0构成图对比 Hadoop1.x构成: HDFS.MapReduce(资源管理和任务调度):运行时环境为JobTracker和TaskTracker: Hadoop ...

  5. 小朋友学Java（2）：Win 7安装JDK

    1 打开命令行窗口,输入java -version. 若提示不认识java命令,说明没有java环境.   1.png 2 从甲骨文网站(http://www.oracle.com/technetwo ...

  6. node多进程

    内容: 1.多进程与多线程 2.node中多进程相关模块的使用 1.多进程与多线程 多线程:性能高:复杂.考验程序员 多进程:性能略低:简单.对程序员要求低 Node.js中默认:单进程.单线程,但是 ...

  7. python面向对象重新梳理

    关于本篇博文: 面向对象中所有的内容的重新梳理,其实面向对象的知识早在一个多月前就学习过并整理过,但是发现还是有所欠缺,故在此以极其简介的语言风格重新梳理一遍 面向对象详细介绍:http://www. ...

  8. 详解Tomcat配置及使用

    2018年06月27日 23:42:34 尘埃丶落定 阅读数:2351    版权声明:本文为博主原创文章,转载请附上作者与出处. https://blog.csdn.net/longyin0528/ ...

  9. 20165233 2017-2018-2 《Java程序设计》第九周学习总结

    20165233 2017-2018-2 <Java程序设计>第九周学习总结 教材学习内容总结 基础 - URL类:java.net包中的URL类是对统一资源定位符的抽象,使用URL创建对 ...

  10. tornado-通过判断后台数据限制登陆--简单的

    import tornado.ioloop import tornado.web import tornado.httpserver # 非阻塞 import tornado.options # 提供 ...