左右选

<head>

	<meta charset="UTF-8">

	<title></title>

	<style>

		select {

			width: 100px;

		}

	</style>

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

	<script>

		$(function() {

			$("[value='>>']").click(function() {

				var selected = $("#sel_left option:selected");

				$("#sel_right").append(selected);

			})

		});

	</script>

</head>

<body>

	<select id="sel_left" multiple="multiple">

		<option>A</option>

		<option>B</option>

		<option>C</option>

		<option>D</option>

		<option>E</option>

	</select>

	<input type="button" value=">>" />

	<input type="button" value="<<" />

	<select id="sel_right" multiple="multiple">

	</select>

</body>

JQuery案例：左右选的更多相关文章

  1. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  2. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  3. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  4. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  5. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

  6. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  7. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  8. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  9. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  10. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. NB-IoT技术适合在哪些场景应用

    LPWAN,Low Power Wide Area Network,低功耗广域网.名字里就有它的两个最重要的特点:低功耗.广覆盖.目前比较主流的有:NB-IoT.LoRa.Sigfox.eMTC.NB ...

  2. GDB调试基础使用方法

    尽管目前使用的VS code可以使用插件一键构建和运行程序,但GDB作为调试利器,还是值得花时间去学习的. 概述 GDB(GNU Debugger) 是一个由GNU开源组织发布的.UNIX/LINUX ...

  3. 力扣 - 剑指Offer 35.复杂链表的复制

    目录 题目 思路1 代码实现 思路2 代码实现 题目 请实现 copyRandomList 函数,复制一个复杂链表.在复杂链表中,每个节点除了有一个 next 指针指向下一个节点,还有一个 rando ...

  4. 分享JDK解压版（ZIP）

    目录 由于安装版本的jdk不太方便,所以我分享一下如何去获取解压版的jdk,jdk配置的话看这个文章 一.先下载exe版本的jdk安装程序: 二.使用7-ZIP解压工具 2.1 JDK8的解压目录 2 ...

  5. 编码风格：Mvc模式下SSM环境，代码分层管理

    本文源码:GitHub·点这里 || GitEE·点这里 一.分层策略 MVC模式与代码分层策略,MVC全名是ModelViewController即模型-视图-控制器,作为一种软件设计典范,用一种业 ...

  6. Unknown CMake command

    Unknown CMake command "add_clang_library".等 在官网上照着打 发现上面错误 结果是版本问题 选好版本和选项catkin还是rosbuild

  7. WSL Ubuntu 18.04 LTS + VS Code

    WSL Ubuntu 18.04 LTS + VS Code ​ WSL(Windows Subsystem for Linux)使得Windows用户能够在Windows系统上使用原生的Linux环 ...

  8. 分布式文档存储数据库之MongoDB副本集

    前文我们聊到了mongodb的索引的相关作用和介绍以及索引的管理,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13950287.html:今天我们来聊下mon ...

  9. 知识全聚集 .Net Core 技术突破 | 简单说说工作单元

    知识全聚集 .Net Core 技术突破 | 简单说说工作单元 教程 01 | 模块化方案一 02 | 模块化方案二 其他教程预览 分库分表项目实战教程 Git地址: https://github.c ...

  10. 对udp dns的思考2

    上一篇文章写道了udp 使用reuseport 多线程编程!!! 但是有几个问题需要考虑一下: 之前hash使用sip sport dip dport为key, 很正常同一个客户端回hash到同一个s ...