Move copy delete options between Select Menus with Javascript

This javascript snippets perform certain tasks like select one or more of the options, move them or copy or delete between two select menus.

You can bookmark the article and use the code whenever you need them.

Click here for the online demo.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>select.html</title>

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="this is my page">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<style type="text/css">
	.maindiv {
		background-color: transparent; 
		width: 800px;
		height: 800px;
		margin: 50px auto;
		padding: 0;
		clear: both;
	}
	
	.leftdiv {
		padding: 0;
		width: 300px;
		height: 500px;
		clear: both;
		float: left;
	}
	
	.middiv {
		padding-top: 100px;
		height: 500px;
		width: 100px;
		float: left;
	}
	
	.middiv input { margin:5px 0; }
	
	.rightdiv {
		padding: 0;
		width: 300px;
		height: 500px;
		float: right;
		magin-top: 0;
	}
	</style>
</head>

<body>
	<div class="maindiv">
	
		<div class="leftdiv">
			<select multiple="multiple" style="height: 500px; width: 225px;" id="left">
				<option value="1"  onclick="javascript:alert('click');">
					<span onClick="javascript:alert('click on left 1');">left 1</span>
				</option>
				<option value="2">left 2</option>
				<option value="3">left 3</option>
				<option value="4">left 4</option>
				<option value="5">left 5</option>
				<option value="6">left 6</option>
				<option value="7">left 7</option>
				<option value="8">left 8</option>
			</select>
		</div>
		
		<div class="middiv">
			<input type="button" value="move ->" onClick="move_Select('right', 'left', 'choose option on left to move', 'move', false);" />
			<input type="button" value="<- move" onClick="move_Select('left', 'right', 'choose option on right to move', 'move', false);" />
			<input type="button" value="copy ->" onClick="move_Select('right', 'left', 'choose option on left to copy', '', false);" />
			<input type="button" value="delete ->" onClick="move_Select('', 'right', 'choose option on right to delete', 'move ', false);" />
			<input type="button" value="move all -->" onclick="move_Select('right', 'left', 'move all to the right', 'move', true);" />
			<input type="button" value="<- move all" onClick="move_Select('left', 'right', 'move all to the left', 'move', true);" />
			<input type="button" value="copy all ->" onClick="move_Select('right', 'left', 'copy all to the right', '', true);" />
			<input type="button" value="delete all ->" onClick="move_Select('', 'right', 'delete all on the right', 'move', true);" />
		</div>
		
		<div class="rightdiv">
			<select multiple="multiple" style="height: 500px; width: 225px;" id="right">
				<option value="9">right 1</option>
			</select>
		</div>
		
	</div>
	
	<script type="text/javascript"> 
	function jsSelectIsExitItem(objSelect, objItemValue) {
		var isExit = false;
		if(objSelect==null){
			return true;
		}
		for ( var i = 0; i < objSelect.options.length; i++) {
			if (objSelect.options[i].value == objItemValue) {
				isExit = true;
				break;
			}
		}
		return isExit;
	}
	
	/**
	addSelectId - when SELECT ID is empty, only delete; 
	selectedId - selected SELECT ID; 
	tipMsg - alert message; 
	method - default method is 'move', otherwise is 'copy'; 
	isSelectAll - copy / move/delete all options; 
	*/
	function move_Select(addSelectId,selectedId,tipMsg,method,isSelectAll){
		var add_select=document.getElementById(addSelectId);
		//var selected_Option=document.getElementById(selectedId).options;
		var flag=true;
		for(i=0;i<document.getElementById(selectedId).options.length;i++){
			var selected_Option=document.getElementById(selectedId).options;
			var val=selected_Option[i].value;
			var text=selected_Option[i].text;
			if(isSelectAll||selected_Option[i].selected==true){
				flag=false;
					if(method=='move'){
						selected_Option[i]=null;
						i-=1;
					}
					// if not option exist  
					if(!jsSelectIsExitItem(document.getElementById(addSelectId),val)){
							var newOption = new Option(text,val);
							add_select.options.add(newOption);
					}
			}
		}
		if(flag){
			alert(tipMsg);
		}
	}
	</script>

</body>
</html>
affiliate_link
Share this Post:
Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Comments are closed.