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. mybatis中单个参数的引用

    单个参数时在test条件中不能用参数名来引用,可以使用_parameter

  2. python爬虫1——获取网站源代码(豆瓣图书top250信息)

    # -*- coding: utf-8 -*- import requests import re import sys reload(sys) sys.setdefaultencoding('utf ...

  3. 用 TensorFlow 实现 SVM 分类问题

    这篇文章解释了底部链接的代码. 问题描述  如上图所示,有一些点位于单位正方形内,并做好了标记.要求找到一条线,作为分类的标准.这些点的数据在 inearly_separable_data.csv ...

  4. JS优先队列排序。出队时，先找出优先级最高的元素，再按照先进先出出队。

    JS优先队列排序.出队时,先找出优先级最高的元素,再按照先进先出出队. /* * 优先队列 * 出队时,先找出优先级最高的元素,再按照先进先出出队. * */ function Queue(){ th ...

  5. yolov3源码分析keras（一）数据的处理

    一.前言 本次分析的源码为大佬复现的keras版本,上一波地址:https://github.com/qqwweee/keras-yolo3 初步打算重点分析两部分,第一部分为数据,即分析图像如何做等 ...

  6. 11、使用xamarin实现全屏播放rtmp之类的直播视频

    直播类的app大部分都是以rtmp hls播放为主.目前主流的app解决方案大部分是引入ijkplayer 这个是基于ffmpeg中的ffplayer实现的. 众所周知ffmpeg的解码能力是一流的. ...

  7. (转)mysql5.7 根据二进制文件mysqlbinlog恢复数据库 Linux

    原文:http://blog.csdn.net/qq_15058425/article/details/61196085 1.开始mysqlbinlog日志功能 先找打my.cnf文件的位置: 2.编 ...

  8. 下拉菜单;手风琴;九宫格的Jquery的使用实例

    下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单 效果如图: 代码如下: <!DOCTYPE html> <html lang="en"> & ...

  9. Android之ListView的使用技巧

    之前有总结过关于ListView的一些优化技巧,比如它的ConvertView的复用Recycler机制,使用ViewHolder来提高列表条目的findById的效率,以及宽高的设置确定值的好处,如 ...

  10. JavaScript -- 猜数、遍历

    ----- 004-猜数.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv="Co ...