jquery以及js實現option左移右移

阿新 • • 發佈：2019-02-17

[html] view plain copy print?

<tablecellspacing="1"width="350px"align="center">
<tr>
<td>
<tablestyle="background-color:white"width="100%">
<tr>
<td>
<

fieldset>
<legend>稽核人員</legend>
<selectname="left_select"multiple="multiple"size="10"id="left_select"style="width : 152px">
</select>
</fieldset

>
</td>
<td>
<inputtype="button"value="<"style="font-size:10pt;width:35px"onclick="left()"><br>
<inputtype="button"value="<<"style="font-size:10pt;width:35px"

onclick="left(true)"><br>
<inputtype="button"value=">"style="font-size:10pt;width:35px"onclick="right()"><br>
<inputtype="button"value=">>"style="font-size:10pt;width:35px"onclick="right(true)"><br>
</td>
<td>
<fieldset>
<legend>系統人員</legend>
<selectname="right_select"multiple="multiple"style="width : 152px"size="10"id="right_select">
<optionvalue="zhangsan">zhangsan</option>
<optionvalue="lisi">lisi</option>
<optionvalue="lisi">lisi</option>
<optionvalue="wangwu">wangwu</option>
</select>
</fieldset>
</td>
</tr>
</table>
</td>
</tr>
</table>

<table cellspacing="1" width="350px" align="center">
			       <tr>
			        <td>
			        <table style="background-color:white" width="100%">
			            <tr>
			                <td>
				                <fieldset>
				                	<legend>稽核人員</legend>
					                <select name="left_select" multiple="multiple" size="10" id="left_select" style="width : 152px">
					                </select>
					             </fieldset>
			                </td>
			                <td>
			              		<input type="button" value="<" style="font-size:10pt;width:35px" onclick="left()"><br>
			              		<input type="button" value="<<" style="font-size:10pt;width:35px" onclick="left(true)"><br>
				                <input type="button" value=">" style="font-size:10pt;width:35px" onclick="right()"><br>
				                <input type="button" value=">>" style="font-size:10pt;width:35px" onclick="right(true)"><br>
			                </td>
			                <td>
			                	<fieldset>
			                		<legend>系統人員</legend>
				                	<select name="right_select" multiple="multiple" style="width : 152px" size="10" id="right_select">
				                		<option value="zhangsan">zhangsan</option>
				                		<option value="lisi">lisi</option>
				                		<option value="lisi">lisi</option>
				                		<option value="wangwu">wangwu</option>
				                	</select>
			                	</fieldset>
			                </td>
			            </tr>
			        </table>
			        </td>
		         </tr>
		     </table>

介面如下圖

首先jquery第一種方法：

[javascript] view plain copy print?

//isAll 是否全部移動
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option").remove();
// == $("#right_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#left_select").append(o);
$("#right_select").find("option:selected").remove();
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option").remove();
// == $("#left_select").empty();
}else{
if(os[i].selected){
var o = new Option(os[i].text,os[i].value);
$("#right_select").append(o);
$("#left_select").find("option:selected").remove();
}
}
}
}

//isAll 是否全部移動
function left(isAll){
	var os = new Array();
	os = $("#right_select").find("option");
	for(i=0;i<os.length;i++){
		if(isAll){
			var o = new Option(os[i].text,os[i].value);
			$("#left_select").append(o);
			$("#right_select").find("option").remove();
			// == $("#right_select").empty();
		}else{
			if(os[i].selected){
				var o = new Option(os[i].text,os[i].value);
				$("#left_select").append(o);
				$("#right_select").find("option:selected").remove();
			}
		}
	}
}
function right(isAll){
	var os = new Array();
	os = $("#left_select").find("option");
	for(i=0;i<os.length;i++){
		if(isAll){
			var o = new Option(os[i].text,os[i].value);
			$("#right_select").append(o);
			$("#left_select").find("option").remove();
			// == $("#left_select").empty();
		}else{
			if(os[i].selected){
				var o = new Option(os[i].text,os[i].value);
				$("#right_select").append(o);
				$("#left_select").find("option:selected").remove();
			}
		}
	}
}

第二種方法： [javascript] view plain copy print?

/**
* 此方法移動的時候會自動刪除不用手動去 remove
* 但移走的選項會預設選中無法取消，程式碼雖少，效果但不如第一種
*/
function left(isAll){
var os = new Array();
os = $("#right_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#left_select").append(os[i]);
}else{
if(os[i].selected){
$("#left_select").append(os[i]);
}
}
}
}
function right(isAll){
var os = new Array();
os = $("#left_select").find("option");
for(i=0;i<os.length;i++){
if(isAll){
$("#right_select").append(os[i]);
}else{
if(os[i].selected){
$("#right_select").append(os[i]);
}
}
}
}

/**
 * 此方法 移動的時候會自動刪除 不用手動去 remove
 * 但移走的選項會預設選中 無法取消，程式碼雖少，效果但不如第一種
 */
function left(isAll){
	var os = new Array();
	os = $("#right_select").find("option");
	for(i=0;i<os.length;i++){
		if(isAll){
			$("#left_select").append(os[i]);
		}else{
			if(os[i].selected){
				$("#left_select").append(os[i]);
			}
		}
	}
}
function right(isAll){
	var os = new Array();
	os = $("#left_select").find("option");
	for(i=0;i<os.length;i++){
		if(isAll){
			$("#right_select").append(os[i]);
		}else{
			if(os[i].selected){
				$("#right_select").append(os[i]);
			}
		}
	}
}

JS實現如下：

[javascript] view plain copy print?

function left(isAll)
{
var os=new Array();
os=document.getElementById("right_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("left_select").add(o);
document.getElementById("right_select").remove(i);
i--;
}
}
}
}
function right(isAll)
{
var os=new Array();
os=document.getElementById("left_select").options;
for(i=0;i<os.length;i++){
if(isAll){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}else{
if(os[i].selected){
var o=new Option(os[i].text,os[i].value);
document.getElementById("right_select").add(o);
document.getElementById("left_select").remove(i);
i--;
}
}
}
}

jquery以及js實現option左移右移

[html] view plain copy print? <tablecellspacing="1"width="350px"align="center">

jQuery實現左移右移

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>完成左移右移</title>

js實現公告欄文字從右向左勻速迴圈滾動，且公告內容可以隨時增減

實現思路滾動內容的left值初始化為外部box寬度（注意：css中設定相對定位）；每0.05s ,left值-2，直到left值=-滾動內容寬度，證明滾動到頭了（此處可根據實際體驗效果設定具體數值）

jQuery,JS實現自定義滑鼠右鍵選單

滑鼠點選事件基本上是每個頁面必不可少的，絕大多數情況下都是普通的滑鼠左鍵點選，即可以通過click()方法來實現。但是我們在很多情況下我們想通過滑鼠右鍵來實現一些功能的實現，比如說一個表格資料，表格的每行資料都可以進行刪除、修改、傳送等等操作，如果採用在每行都新增這些操作

js和jQuery以及easyui實現對下拉框的指定賦值

js實現： 1. 通過讓第i個option為selected實現選中第i個，程式碼如下：（id為下拉框id）（1） document.getElementById("id").options[i].selected=true; （2）document.getElemen

利用jQuery實現從左向右無縫輪播樣式

html+js css /*秦悅風采*/ #show{width:100%; height:120px; margin-top:66px;} #show .content{ width:1200px; margin:0 auto;} #show .c

zTree結合jquery.contextMenu.js實現右鍵選單

var zTree; var demoIframe; var selectNode; var flag=true; var setting = { view: { dblClickExpand: false,

jquery.form.js 實現異步上傳

llb element eth document == ctype tostring detail new 前臺： <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype

js 利用jquery.gridly.js實現拖拽並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

左移右移置位

int 裏的通過超過二進制方法原碼可能字長 int i = 1;i = i << 2; //把i裏的值左移2位也就是說,1的2進制是000...0001(這裏1前面0的個數和int的位數有關,32位機器,gcc裏有31個0),左移2位之後變成

css3基礎 transition 配合position，實現從左往右彈出的效果

資源 oct auth tca round 公開 gpo absolute ide 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

java 中整數左移右移的運算技巧

“ << " : 左移運算子，num << n, 相當於 num 乘以2的 n 次方 " >> " : 右移運算子，num >> n, 相當於 num 除以2的 n 次方 ps： 1<<4 , 即 1×2^4=16； 2&l

C語言實現陣列的迴圈右移

#include <stdio.h> #include <stdlib.h> #define N 100 int main() { int i, j, x[N], a, b; printf("請輸入你想右移的數字

java實現計算器（最低版1.0，只能實現從左到右依次計算）——初學者入門

軟體:eclipse 才開始用java設計東西，我覺得這個程式適用於初步想設計計算器的同學用，雖然很簡單，但我會慢慢更新自己所寫計算器，實現更強的邏輯。例如：61-7*4=216（從左至右的簡單邏輯，還不完善）程式碼：（有詳細註釋） //大佬不適合看！ package l

Jquery.media.js實現網頁線上預覽pdf檔案

近期在工作中遇到了需要在網站預覽pdf檔案的需求，網上的資料很多，我使用了其中一種，即使用 Jquery.media.js包實現。首先需要準備兩個內容： 1,jquery.js，任意版本 2,jquery.media.js，可以從網上搜，或者去下面我提供的地方下載（是我上傳的），

計算機系統二進位制原碼補碼反碼詳解 JAVA 二進位制位運算（位與位或位取反位異或左移右移）

在計算機系統中，數值一律使用補碼來表示和儲存。在探求為何計算機要使用補碼之前，讓我們先了解原碼，反碼和補碼的概念。　　對於一個數，計算機要使用一定的編碼方式進行儲存。原碼，反碼，補碼是計算機儲存一個具體數字的編碼方式。　　一個數在計算機中的二

jQuery外掛jquery.kxbdmarquee.js實現無縫滾動效果

轉：https://www.jb51.net/article/105618.htm 這篇文章主要為大家詳細介紹了jQuery常用外掛jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價值，感興趣的小夥伴們可以參考一下 1.html程式碼 <head> &

GNU彙編邏輯或算數左移右移

lsl 左移 .text .global _start _start: mov r1,#0b1 mov r1,r1,lsl#2 ROR迴

jquery結合js實現動態新增內容，並給動態新增的內容新增事件

jquery結合js實現向後臺傳送請求，給頁面動態新增內容，並給動態新增的內容新增事件.html內容如下： <button class="btn btn-md customButton" id="add_red_envelope">新增紅包&

利用jQuery.print.js實現canvas的列印功能

需求把在瀏覽器中的利用canvas做的圖實現列印功能思路先把canvas轉換成img 把生成的img利用jQuery外掛jquery.print.js實現圖片列印功能資料連

jquery以及js實現option左移右移

相關推薦