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

代码如下：

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. 6.19-response（响应）,session(会话技术，服务器端技术) 内置对象,application（内置对象）,pageContext (内置对象),cookie（客户端技术）

    一.response(响应) 页面重定向 response.sendRedirect(""); 转发: request.getRequestDispatcher("&qu ...

  2. 【C++11新特性】 auto关键字

    原文链接: http://blog.csdn.net/xiejingfa/article/details/50469045 熟悉脚本语言的人都知道,很多脚本语言都引入了“类型自动推断”技术:比如pyt ...

  3. 【Linux_Unix系统编程】chapter7 内存分配

    Chapter7 内存分配本章将用于在堆或者栈上分配内存的函数.7.1 在堆上分配内存 通常将堆的当前的内存边界称为"program break" 7.1.1 调整program ...

  4. php 数组随机取值

    array_rand()在你想从数组中取出一个或多个随机的单元时相当有用.它接受 input 作为输入数组和一个可选的参数 num_req,指明了你想取出多少个单元 - 如果没有指定,默认为 1. a ...

  5. FIO read测试结果偏离

    工作中发现一个fio问题,测试组测试出来的数据read速度一个是17.0G/s,一个是13.2G/s.要知道我后台只有24块7.2k RPM的机械硬盘啊!怎么也不可能有这样的速度. 回家之后我模拟了实 ...

  6. 中国Linux开源镜像站大全

    本文来源:各大开源软件.发行版镜像页面.       请注意这是一个总结,如果您自己搭建了一个小型开源镜像,这里并没有.以下列出的是包含大量不同镜像的站点.       具体配置中,我建议您使用大企业 ...

  7. JavaScript词法分析(尽力理解)

    JavaScript中在调用函数的那一瞬间之前,会先进行词法分析 词法分析的过程: 当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面: 1:函数参数 ...

  8. sqlserver查询---分配cpu等资源

    数据库资源按需分配 https://www.cnblogs.com/i6first/p/4138365.html https://blog.csdn.net/kk185800961/article/d ...

  9. rabbitMQ 的基本知识

    参考:  https://www.cnblogs.com/dwlsxj/p/RabbitMQ.html

  10. leetcode66

    public class Solution { public int[] PlusOne(int[] digits) { ]; < ) { digits[digits.Length - ]++; ...