jQuery下拉框操作系列$("option:selected",this)  &&（锋利的jQuery）

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>下拉框应用</title>

    <script src="../../js/jquery-1.4.4.min.js"></script>

</head>

<body>

    <div class="centent">

        <select multiple id="select1" style="width:100px; height:160px;">

            <option value="1">选项1</option>

            <option value="2">选项2</option>

            <option value="3">选项3</option>

            <option value="4">选项4</option>

            <option value="5">选项5</option>

            <option value="6">选项6</option>

            <option value="7">选项7</option>

            <option value="8">选项8</option>

        </select>

        <div>

            <span id="add">选中添加到右边≥≥</span>

            <span id="add_all">全部添加到右边≥≥</span>

        </div>

    </div>

    <div class="centent">

        <select multiple id="select2" style="width:100px; height:160px;"></select>

        <div>

            <span id="remove">选中删除到左边<<</span>

            <span id="remove_all">全部删除到左边<<</span>

        </div>

    </div>

    <script>

        $(function () {

            $("#add").click(function () {

                var $options = $("#select1 option:selected");  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select2");   //追加到select2

            })

            $("#add_all").click(function () {

                var $options = $("#select1 option");  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select2");   //追加到select2

            })

            $("#select1").dblclick(function () {

                var $options = $("option:selected", this);  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select2");   //追加到select2

            })

            $("#remove").click(function () {

                var $options = $("#select2 option:selected");  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select1");   //追加到select2

            })

            $("#remove_all").click(function () {

                var $options = $("#select2 option");  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select1");   //追加到select2

            })

            $("#select2").dblclick(function () {

                var $options = $("option:selected", this);  //获取选中的选项

                //var $remove = $options.remove();  //删除下拉列表中选中的选项

                $options.appendTo("#select1");   //追加到select2

            })

        })

    </script>

</body>

</html>

　　

jQuery下拉框操作系列$("option:selected",this) &&（锋利的jQuery）的更多相关文章

  1. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  2. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

  3. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  4. selenium - 下拉框操作

    # 9. 下拉框操作# (1)等待下拉列表和下拉列表中值存在# (2)在下拉列表中选择一个值 # 三种方式# A. 获取所有的下拉列表值,然后用循环去匹配相同的值 select_by_index(下标 ...

  5. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  6. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  7. jQuery下拉框插件8种效果

    jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...

  8. Jquery下拉框左右选择

    1.说明 本文demo实现下拉框左右选择,本文地址:http://www.cnblogs.com/lengzhan/p/6423023.html 2.代码 <!DOCTYPE html PUBL ...

  9. jQuery下拉框扩展和美化插件Chosen

    Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的.很长的select选择框变的更好看.更方便.不仅如此,它更扩展了select,增加了自动筛选的功能.它可对列表进行分组, ...

随机推荐

  1. git install

    wget -O git-master.zip https://codeload.github.com/git/git/zip/master unzip git-master.zip cd git-ma ...

  2. poj1220------高精度进制转换模板

    #include<iostream> #include<cstdio> #include<cstring> using namespace std; const i ...

  3. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  4. Java中equals，hashcode

         在Java语言中,Object对象中包含一个equals和hashCode方法,其中hashCode方法是由JVM本地代码(native code)实现的,返回值是一个有符号的32位整数,对 ...

  5. 用asp.net core 2.0 + EFCore.Sqlite做个小网站

    许久没用C#写程序.听说进来发生大事,.NetCore2.0发布了,于是便学习了下,本站也应运而生. 大多数的地方按照官方的文档起步走就可以了,这里谈谈遇到的几个坑. 首先,本站是基于ASP.NetC ...

  6. VS2013创建Windows服务与调试服务

    1.创建Windows服务 说明: a)Description 服务描述,直接显示到Windows服务列表中的描述: b)DisplayName 服务显示名称,直接显示到Windows服务列表中的名称 ...

  7. Apache版本hadoop-2.6.0.tar.gz平台下搭建Hue

    不多说,直接上干货! http://archive.apache.org/dist/ http://www.cnblogs.com/smartloli/p/4527168.html http://ww ...

  8. Chapter 3 Phenomenon——6

    A low oath made me aware that someone was with me, and the voice was impossible not to recognize. 某人 ...

  9. MySQL中date类型的空值0000-00-00和00:00:00

    1.如果mysql中使用了date类型,并且默认值为'0000-00-00', 那么数据库中的'0000-00-00 00:00:00', '0000-00-00', '00:00:00'这三个值是相 ...

  10. php的error_log()记录日志

    <?php date_default_timezone_set('PRC');//设置时区,否则会有警告 //把This s a error保存到/home/log-yyyy-MM-dd.txt ...