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

代码如下：

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. mysql互为主从

    摘自:http://flash520.blog.163.com/blog/static/3441447520101029114016823/ A B 为两台MySQL服务器,均开启二进制日志,数据库版 ...

  2. Spark学习笔记5：Spark集群架构

    Spark的一大好处就是可以通过增加机器数量并使用集群模式运行,来扩展计算能力.Spark可以在各种各样的集群管理器(Hadoop YARN , Apache Mesos , 还有Spark自带的独立 ...

  3. 【转】SQL模糊查询

    在进行数据库查询时,有完整查询和模糊查询之分. 一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表示任 ...

  4. spark1.0属性配置以及spark-submit简单使用

    在spark1.0中属性支持三种配置方式: 1.代码 在代码中构造SparkConf时指定master.appname或者key-value等 val conf = new SparkConf(); ...

  5. PHP mysqli_fetch_object() 函数实例讲解

    定义和用法 mysqli_fetch_object() 函数从结果集中取得当前行,并作为对象返回. 注释:该函数返回的字段名是区分大小写的. 语法 mysqli_fetch_object(result ...

  6. 高斯混合模型（理论+opencv实现）

    查资料的时候看了一个不文明的事情,转载别人的东西而不标注出处,结果原创无人知晓,转载很多人评论~~标注了转载而不说出处这样的人有点可耻! 写在前面: Gaussian Mixture Model (G ...

  7. 网络命令ping/netstat/ipconfig/arp/tracert/nbstat

    1.1 Ping命令的使用 ping检测网络故障步骤: ping 127.0.0.1 ping环绕指针检测是否在计算上anzhaung了TCP/IP协议及配置是否正确 ping本机IP这个命令被被送到 ...

  8. RESTful转载，多看几遍就理解了写点自己的看法和理解

    要理解资源路由就要理解什么是RESTful.如果一个架构符合REST(即Representational State Transfer的缩写,意为表现层状态转化)原则,就称它为RESTful架构. R ...

  9. OpenACC 书上的范例代码（Jacobi 迭代），part 2

    ▶ 使用Jacobi 迭代求泊松方程的数值解 ● 首次使用 OpenACC 进行加速,使用动态数组,去掉了误差控制 #include <stdio.h> #include <stdl ...

  10. VB6 创建控制台应用程序

    ' 功能:为VB程序创建一个consolewindow.Private Declare Function AllocConsole Lib "kernel32" () As Lon ...