jquary 双select用法

最新推荐文章于 2021-11-24 23:43:32 发布
最新推荐文章于 2021-11-24 23:43:32 发布
阅读量105 收藏
点赞数
分类专栏： jquary&html 文章标签： html jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhenguang00711/article/details/84012357
版权
项目要用到双select，这个完成：单个的在select之间左右异动，和全部的异动。最后以字符串的形式将需要的值提交： 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>select 使用</title>
		<META http-equiv=Content-Type content="text/html; charset=UTF-8">
                 <!-- 这里放css -->
                 <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
                 <script type="text/javascript">
                  <!--移动人员-->
	//从左到右
	function left_to_right(){
		var selectText=$("#emp_left").find("option:selected").text();
		var selectValue=$("#emp_left").val();
		//检验左边select是否有选中
			if (null==selectValue||selectValue=="") {  
					alert("请先选择左边的员工！");
			        return;  
	   		 }else{
	   			var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; // 填充右侧的值 
	   		    $("#emp_right").append(selectop); 
	   		    $("#emp_left option:selected").remove();  
		   	 }
		};
	从右到左
	function right_to_left(){
		var selectText=$("#emp_right").find("option:selected").text();
		var selectValue=$("#emp_right").val();
		//检验左边select是否有选中
			if (null==selectValue||selectValue=="") {  
					alert("请先选择右边的员工！");
			        return;  
	   		 }else{
	   			var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; // 填充右侧的值 
	   		    $("#emp_left").append(selectop); 
	   		    $("#emp_right option:selected").remove();  
		   	 }
		};
		//全部从左到右
		function all_left_to_right(){
				var $options = $('#emp_left option');
	            $options.appendTo('#emp_right');
	            $('#emp_left option').remove(); 
			}
		//全部从右到左
			function all_right_to_left(){
				var $options = $('#emp_right option');
	            $options.appendTo('#emp_left');
	            $('#emp_right option').remove(); 
			}
		//提交,即将右边选框的所有员工提交
		function submitMyForm(){
				var subtext="";
			$('#emp_right option').each(function() {
				subtext += $(this).val()+',';
	                       });
			 alert(subtext);
	              }
</script>

</head>
<body>
<table>
<tr>
	<td align="right">
	<select name="emp_left" id="emp_left" class="select_emp" size="30">
		<option value="1" selected="selected">
		          111111111111
		</option>
                <option value="2" selected="selected">
		          22222222222
		</option>
                <option value="3" selected="selected">
		         3333333333333
		</option>
                <option value="4" selected="selected">
		          44444444444444
		</option>
                <option value="5" selected="selected">
		          5555555555555555
		</option>
                <option value="6" selected="selected">
		          66666666666666666666
		</option>
                <option value="7" selected="selected">
		          77777777777777777777777
		</option>

	</select>
					</td>
					<td>
					</td>
					<td valign="middle" align="center" class="btn_move">
						<table>
							<tr>
								<td>
									<img src="images/toright.jpg" style="cursor: pointer;"
										onclick="left_to_right()" />
								</td>
							</tr>
							<tr>
								<td>
									<img src="images/toleft.jpg" style="cursor: pointer;"
										onclick="right_to_left()" />
								</td>
							</tr>
							<tr>
								<td>
									<img src="images/alltoright.jpg" style="cursor: pointer;"
										onclick="all_left_to_right()" />
								</td>
							</tr>
							<tr>
								<td>
									<img src="images/alltoleft.jpg" style="cursor: pointer;"
										onclick="all_right_to_left()" />
								</td>
							</tr>
							<tr>
								<td>
									<img src="images/button_cancel.gif" style="cursor: pointer;" />
								</td>
							</tr>
							<tr>
								<td>
									<img src="images/ok.gif" style="cursor: pointer;"
										onclick="submitMyForm()" />
								</td>
							</tr>
						</table>
					</td>
					<td>
					</td>
					<td>
	<select name="emp_right" id="emp_right" class="select_emp" size="30">
		<option value="8" selected="selected">
		          8888888888888888
		 </option>
	</select>
					</td>
				</tr>
</table>
</body>

zhenguang00711
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery实现的双Select框多选表单提交
03-17
NULL 博文链接：https://maskainv.iteye.com/blog/547672
两个select来回联动
say_profect的博客
12-29 1674
在两个select中来回切换option的实现 0.HTML <select multiple="multiple" id="sel1"> <option value="1">ABC</option> <option value="2">DEF</option> <option value="3">GHI</option> <o
oracle 双select语句,第一章：oracle_sql语句之select语句
weixin_35909443的博客
04-04 261
scott用户拥有哪些表？SQL>select * from tab;查询表中所有行所有列SQL>select * from dept;SQL>select * from emp;将缓冲区的命令保存为脚本：SQL>save 1.sql查看脚本文件的内容：SQL>get 1.sql运行脚本文件:SQL>@1.sql查询表中感兴趣的列select ename,sal...
oracle 双select语句,04-Oracle入门之简单select语句
weixin_36468140的博客
04-04 207
补充知识设置语言环境LANG="zh_CN.UTF-8"[root@localhost ~]# echo $LANGzh_CN.UTF-8启动和关闭监听服务[oracle@localhost ~]$lsnrctl start status stoporacle启动[oracle@localhost ~]$sqlplus /nologConnected.基本命令sqlplus的命令set line...
双选列表 双下拉列表 双select列表 jquery
iteye_12263的博客
06-17 274
[img]http://hiphotos.baidu.com/gaoxiang9457/pic/item/abad23d58e0dcfb2a044df51.jpg[/img] 双下拉多选列表 //选择功能 function tianjiafn(){ $("#set...
下拉框插件jquery.select.js
06-01
然后，在文档加载完成后，使用jQuery的选择器找到这些元素，并调用插件的方法来应用样式。 ```javascript $(document).ready(function() { $('select.custom-select').selectBox(); }); ``` `selectBox()` 是插件...
jquery Ajax实现Select动态添加数据
10-19
在本案例中，我们将深入探讨如何使用jQuery和Ajax技术来实现在Select元素中动态添加数据，这通常用于实现交互式的用户界面，如联动下拉菜单。 首先，背景情况是这样的：传统的Select元素通常在页面加载时就包含了...
jQuery select双向选择菜单特效代码
03-20
2. **事件绑定（Event Binding）**：使用`.on()`方法绑定事件监听器，如`$("#select1").on("change", function() {...})`会在"select1"的值改变时执行回调函数。 3. **DOM操作（DOM Manipulation）**：在事件触发时...
JS、jQuery中select的用法详解
10-22
本文将详细介绍如何使用JS和jQuery来操作`select`元素，包括添加、删除、获取选中项的值和文本等操作。 ### JavaScript 中 `select` 的用法 #### 1. 获取 `select` 元素 首先，我们需要通过`getElementById`方法...
jquery操作select方法汇总
12-02
这里我们将详细探讨jQuery如何实现对SELECT的选择、设置、添加和删除Option的方法。 1. **jQuery获取Select选择的Text和Value** jQuery提供了方便的方法来获取SELECT元素当前选中的选项的文本和值。例如，我们...
NIO 双select模式的demo
iteye_19351的博客
01-06 110
最简单的双select模式，一个用来接收请求连接，一个请求读写 [code="java"] package nio; import java.io.IOException; import java.net.InetSocketAddress; import java.net.ServerSocket; import java.nio.ByteBuffer; import ja...
MySQL基础_2_SELECT 语句
weixin_44524273的博客
11-24 304
一、SQL的分类 1、DDL 即数据定义语言 CREATE / ALTER / DROP / RENAME / TRUNCATE 定义不同的数据库、表、视图、索引等数据库对象，还可以用来创建、删除、修改数据库和数据表的结构 2、DML 即数据操作语言 INSERT / DELETE / UPDATE / SELECT 用于添加、删除、更新和查询数据库记录，并检查数据库完整性 3、DCL 即数据控制语言 COMMIT / ROLLBACK / SAVEPOINT / GRANT / REVOKE 用
在使用select 选择框时，2个select 怎么关联在一起
海阔天空
03-08 2412
在使用select 选择框时，2个select 怎么关联在一起（第一个值发生变化，第二个select值随第一个变化而不同） 两个输入框代码 <el-form :inline="true" :model="filters"> <el-form-item> <el-select v-model="filters.value1" clearable placeholder="请选择" @change="getRole($event)"&
双下拉框的用法
thigh_d的博客
08-03 353
双下拉框的用法 通过改变一个下拉框的数据，另一个下拉框也跟着改变数据。 实现原理 通过双向数据绑定v-model绑定值，然后在使用v-for循环遍历下拉框数据
SQL中SELECT语句详解
热门推荐
叶清逸的博客
06-04 14万+
本篇文章讲述SQL语句中的SELECT查询语句，以供参考，如有错误或不当之处还望大神们告知。 简单查询SELECT-FROM 用于无条件查询单张表中的行或列 假设有表如图所示 查询名字叫 ‘叶清逸’ 的记录： select * from T_USER where u_name = '叶清逸' ; 查询结果： 查询一个或多个属性，u_name,u_age,u_scor...
javascript实现两个select选择框内容动态绑定
Walker_m的博客
04-23 5312
1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市：对应的html代码，主体就是两个选择框[html] view plain co...
select的双向绑定方法
我欲乘风破浪
06-02 3923
首先看官网的介绍，明确指出v-model指令在表单<input>、<textarea>、<select>中使用 在select中绑定一个v-model 下面这段代码的含义：为select绑定了一系列的内容，然后option里面的值是根据data里面的selectItem展示，selectItemContain需要在data里面申明 <se...
mysql多重select_MYSQL之select的高级用法
weixin_35693423的博客
01-18 1394
作用：# 多表联查，联表查询1.传统连接1.集合#集合[xiaoqiu,xiaowang,qiandao][80,90,100]#数据库id:[1,2,3]name:[xiaoqiu,xiaowang,qiandao]id:[1,2,3]mark:[80,90,100]2.建表mysql> create table students(id int,name varchar(10));Quer...
jquery中select的用法
最新发布
05-11
jQuery中可以通过`$('select')`来获取所有的`<select>`元素，然后可以使用一系列方法来操作它们。 常用的select方法有： 1. `val()`: 获取或设置`<select>`元素的选中值。 例如：`$('select').val()`获取选中的值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值