<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>可移动的复选框</title>

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<script language="javascript">

$(document).ready(function(e){

//多选框相互可移动 功能

$('#menu').dblclick(function(){

	  　 if($("#menu option:selected").length>0)

　　　　　　　{

　　　　　　　　　　　$("#menu option:selected").each(function(){

　　　　　　　　　　　　　　$("#add_menu").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

　　　　　　　　　　　　　　$(this).remove();　

　　　　　　　　　　　})

　　　　　　　}

　　　　　　　else

　　　　　　　{

　　　　　　　　　　　alert("请选择要添加的选项！");

　　　　　　　} 

});

$('#add_menu').dblclick(function(){

	 　 if($("#add_menu option:selected").length>0)

　　　　　　　{

　　　　　　　　　　　$("#add_menu option:selected").each(function(){

　　　　　　　　　　　　　　$("#menu").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");

　　　　　　　　　　　　　　$(this).remove();　

　　　　　　　　　　　})

　　　　　　　}

　　　　　　　else

　　　　　　　{

　　　　　　　　　　　alert("请选择要移除的选项！");

　　　　　　　} 

	});

	})

</script>

</head>

<body>

双击选项 可左右移动数据  制作：光明工作室 gmll.cn

<table>

 <tr>

					  <td rowspan="4">选项：</td>

					  <td rowspan="4"><select name="menu" size="5" multiple="multiple" id="menu" style="width:100px; height:100px;">

					    <option value="001">新闻</option>

					    <option value="002" selected>客房</option>

					    <option value="003">婚宴</option>

					    <option value="004">问答</option>

					    <option value="005">评论</option>

					    <option value="006">会议</option>

					    </select>

                      </td>

					  <td> </td>

					  <td rowspan="4"><select id="add_menu" size="5" multiple="multiple" style="width:100px; height:100px;">

				    </select></td>

		          </tr>

 <tr>

   <td>>></td>

 </tr>

 <tr>

   <td><<</td>

 </tr>

 <tr>

   <td> </td>

 </tr>

</table>

</body>

</html>

jquery下拉单选框可左右移动数据的更多相关文章

  1. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  2. jquery 下拉选择框/复选框常用操作

    通常 1.我们需要获取select中选中的值,可以使用: $("#selectID").find("option:selected").val();  --一般 ...

  3. jquery 下拉框 收藏

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

  4. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  5. ul+jquery自定义下拉选择框

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

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

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

  7. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

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

    jQuery下拉框操作系列$("option:selected",this)  &&(锋利的jQuery) <!DOCTYPE html> <ht ...

  9. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

随机推荐

  1. Hibernate的批量查询——原生sql查询

    1.查询所有的学生信息: (1)查询结果中,一条信息放入到一个数组中,从list集合中取出数组,并对数组进行遍历. public class GeneratorTest { public static ...

  2. lg4820 书堆

    题目链接 题意概述:n本书,在桌子边缘堆放,求最长长度. 首先……我们需要一点初中物理知识来推一下规律. 下图是一本书的情况,一本书时书伸出1/2处于临界状态,显然. 两本书时,把两本书看作整体,则有 ...

  3. 2019 SDN课程阅读作业（2）

    1.过去20年中可编程网络的发展可以分为几个阶段?每个阶段的贡献是什么? 主动网络(从1990年代中期到2000年代初) 它在网络中引入了可编程的功能以实现更多的创新: 20世纪90年代初,主动网络研 ...

  4. 【AtCoder】 ARC 097

    link C-K-th Substring 题意:找出已知串中第\(k\)大的子串,子串相同的不算 \(k\)好小啊,要怎么做啊 不是[Tjoi2015]弦论吗 算了,直接SAM吧 #include& ...

  5. S905系列的uboot分析

    Ubuntu18.04通过PL2303HX连接TTL 接线的连接 PL2303的3.3V悬空, TX接盒子RX, RX接盒子TX, GND接盒子GND 终端选择 系统自带pl2303的驱动, 可以通过 ...

  6. github将本地仓库的代码上传到Github

    本篇主要参考博文:https://blog.csdn.net/IT_faquir/article/details/52516214 你要先完成上一篇的操作,即将代码上传到本地仓库中,才能上传到gith ...

  7. redis支持远程接入的安全防护问题

    如果我们没有启用保护模式,支持远程接入,启用默认端口6379,而且是用root用户启动的,那么基本上redis就是在裸奔了,人家分分钟搞你没商量. 我们模拟一下,现在机器A(ip假设为10.100.1 ...

  8. git向远程git仓库提交代码步骤详解

    一.从远程仓库clone工程到本地 git clone -b 分支名称 http://10.1.1.11/service/tmall-service.git  localDestDirectory l ...

  9. Egret《决战沙城》框架学习

    源码地址:https://github.com/yicaoyimuys/EgretGameEngine 虽然走花观马看了看,但是收获还是蛮多. mvc: BaseController          ...

  10. Manytasking optimization MATP

    Manytasking Jmetal代码反向解析1_MATP测试函数集 觉得有用的话,欢迎一起讨论相互学习~Follow Me 这是我在写Manytask optimization时的笔记,代码地址可 ...