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. webservice gsoap 小记

    参考 http://www.cs.fsu.edu/~engelen/soap.html 1. web service client application > wsdl2h -s -o MyHe ...

  2. 近期js

    1 var value1 = 0, value2 = 0, value3 = 0; for ( var i = 1; i <= 3; i++) { var i2 = i; (function() ...

  3. Jmeter之Bean shell使用

    转载地址:http://www.cnblogs.com/puresoul/p/4915350.html 一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且 ...

  4. docker安装指定版本TAG的镜像

    在docker中安装镜像,一般过程是,docker search 软件名称. 本文以tomcat为例,讲解下载指定版本TAG的tomcat. 搜索tomcat镜像 $ sudo docker sear ...

  5. jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  6. Flume搭建及学习(基础篇)

    转载请注明原文出处:http://www.cnblogs.com/lighten/p/6830439.html 1.简介 该文主要是翻译官方的相关文档,源地址点击这里.介绍一下Flume的一些基本知识 ...

  7. 《LeetBook》leetcode题解(18) : 4Sum[M]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  8. 在商城系统中使用设计模式----简单工厂模式之在springboot中使用简单工厂模式

    1.前言: 不了解简单工厂模式请先移步:在商城中使用简单工厂.在这里主要是对springboot中使用简单工厂模式进行解析. 2.问题: 什么是简单工厂:它的实现方式是由一个工厂类根据传入的参数,动态 ...

  9. 关系型数据库MySQL主从同步-读写分离

    1.环境准备 我的数据库版本是MySQL 5.6 MySQL主机至少两个实例,可以是多实例,可以是多台主机 关闭selinux,关闭防火墙等基础优化 2.安装 yum -y install make ...

  10. chrome 下修改 agent 的方法

    前言 这篇文章和 tiankonguse 的个人网站里的文章保持同步. 很早之前,在 chrome 下修改 agent 的方法是使用 chrome 插件. 后来 chrome 的某一个版本中自带这个功 ...