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

代码如下：

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. no_unnest,push_subq,push_pred的用法 (转)

    常常有人把这三个hint搞混,主要是因为对三种重写原理不清楚.特总结如下.(实验环境为10204)1. no_unnest, unnestunnest我们称为对子查询展开,顾名思义,就是别让子查询孤单 ...

  2. Spring Security安全以及单点登录

    1.单点登录:多个系统,只需在一个系统登录以后,其他系统可以直接访问. 2.CAS(认证服务器),Apache Httpd,OpenLdap,OpenSSL(生成证书)几个工具实现 3.原理:登录通过 ...

  3. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  4. 那些你希望N年前就掌握的命令

    这篇文章转载自黑客志,短短的一篇文章我找到了3个对我非常有用的技巧,在信息爆炸的今天,简直就跟捡宝似的,希望这些命令对你也有帮助. 有人在Reddit上发帖询问:有没有哪条命令是你希望自己在几年前就掌 ...

  5. Mongodb下载、安装、配置与使用

    记得在管理员模式下运行CMD,否则服务将启动失败 一.下载 官网下载地址:https://www.mongodb.com/download-center?jmp=nav#community 为了方便下 ...

  6. mysql 更新(九) pymysql模块的使用

    16-pymysql模块的使用   本节重点: pymysql的下载和使用 execute()之sql注入 增.删.改:conn.commit() 查:fetchone.fetchmany.fetch ...

  7. dos批处理文件中的变量小结

    很多情况下我们需要用到一些批处理文件中的变量,方便我们执行一些操作,这里简单整理下,方便需要的朋友   批处理中的变量,我把他分为两类,分别为"系统变量"和"自定义变量& ...

  8. android提权

    Android的内核就是Linux,所以Android获取root其实和Linux获取root权限是一回事儿. 你 想在Linux下获取root权限的时候就是执行sudo或者su,接下来系统会提示你输 ...

  9. laravel5.4安装的报错

    laravel5.4安装的报错 [InvalidArgumentException] Could not find package laravle/installer at any version f ...

  10. quartz 的简单使用

    0.依赖: <!-- 引入quartz对应的依赖 --> <dependency> <groupId>org.quartz-scheduler</groupI ...