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. Ultra-QuickSort (POJ 2299)树状数组+离散化

    题目链接 Description In this problem, you have to analyze a particular sorting algorithm. The algorithm ...

  2. jQuery核心函数的四种不同用法

    核心函数根据实参的不同,有四种不同的用法. ①传一个函数作为参数 例如:$(function(){}) 作用:和window.onload = function(){}类似,它会在文档加载完成之后运行 ...

  3. php内核为变量的值分配内存的几个宏

    在php5.3之前,为某变量分配内存是用宏 MAKE_STD_ZVAL; 737 #define MAKE_STD_ZVAL(zv) \ # /Zend/zend.h738 ALLOC_ZVAL(zv ...

  4. C、C++基础和编程风格 （转）

    原文链接 作者:寒小阳时间:2013年8月.出处:http://blog.csdn.net/han_xiaoyang/article/details/10515417.声明:版权所有,转载请注明出处, ...

  5. Java之IO(一)InputStream和OutputStream

    转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...

  6. Angularjs集成第三方js插件之Uploadify

    有时候需要用一些第三方插件,比如datepicker,slider,或者tree等.以前的做法是直接通过jquery取得某个元素,然后调用某个方法即可.但在angularjs中,不能直接这么写,必须写 ...

  7. 【jQuery源码】html,text,val

    jQuery封装的方法html,text,val .html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值 一.h ...

  8. c# static用法

    有时候写程序时常常遇到这样的情况:   1.定义了变量和方法不知道什么时候该加上static修饰符. 2.static变量和方法与非static变量和方法有什么区别? 3.在一个类的静态方法里为什么不 ...

  9. Python -- 数据库连接

    1.连接MySQL(x64系统装不上x32版本) MySQL现在都不支持Python3 import MySQLdb con = MySQLdb.connect(host='127.0.0.1', u ...

  10. Android-NDK处理用户交互事件

    在 android_main(struct android_app* state)函数里面设置输入事件处理函数:state->onInputEvent = &handleInput;// ...