stlsmiths · May 16, 2011 17:38
diff --git a/gistfile1.js b/gistfile1.js
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 	<title>YUI PickList Example</title>
 	<meta http-equiv="content-type" content="text/html; charset=utf-8">

 	<script src="../yui/build/yuiloader/yuiloader-min.js"></script>

 <style type="text/css">
 	body {
 		margin-left: 15px;
 		padding:0;
 	}

 	#idResults {
 		background-color: #9ff;
 		border: 1px solid;
 		width: 50%;
 	}

 </style>

 <script>
 var loader = new YAHOO.util.YUILoader({
 
    require: [  'yuiloader-dom-event', 'fonts', 'button' ],
    loadOptional: true,
 	allowRollup:true,
 	
    // The function to call when all script/css resources have been loaded
    onSuccess: function() {

 		YAHOO.util.Event.onDOMReady( function() {
 		// create a sandbox ... 
 			(function(){
 			//
 			//  Aliases for YUI placeholders
 			//
 				var YDom = YAHOO.util.Dom, 
 					YUtil = YAHOO.util, 
 					YLang = YAHOO.lang,
 					YEvent = YAHOO.util.Event;
 					 
 			//
 			//  Make an array of option objects as { value:, text: } 
 			//		 
 				var jsLarge = [];
 				for(var i=0; i<34; i++)
 					jsLarge[i] = { value:i+1, text:'Option No. ' + (i+1)};
 		
 			//
 			//  Get DOM references to SELECT list-boxes
 			//
 				var lbLeft  = YDom.get('idLeft');
 				var lbRight = YDom.get('idRight');
 				
 			//
 			//  Initially, fill left SELECT with sample data 
 			//	
 				for(var i=0; i<jsLarge.length; i++)
 					lbLeft.options[lbLeft.options.length] = new Option( jsLarge[i].text, jsLarge[i].value );
 		
 		
 			//
 			//  Define some "helper" functions for transferring options between 
 			//   SELECT boxes
 			//
 				function xfrOption( obj_src, obj_dest) {
 					if ( !YLang.isObject(obj_src) || !YLang.isObject(obj_dest) ) return;
 					//
 					//  If the source SELECT has an item selected, 
 					//    add it to destination SELECT, 
 					//    then delete the one from the source
 					//
 					if ( obj_src.selectedIndex > -1 ) {
 						var opt = obj_src.options[obj_src.selectedIndex];
 						obj_dest.options[obj_dest.options.length] = new Option( opt.text, opt.value );
 						obj_src.remove( obj_src.selectedIndex );
 					}
 				}
 		
 				function xfrAllOptions( obj_src, obj_dest) {
 					if ( !YLang.isObject(obj_src) || !YLang.isObject(obj_dest) ) return;
 					//
 					//  Loop through the source SELECT, adding new options to destination,
 					//   then zero out the source SELECT quickly by setting array lenth to zero
 					//
 					for(i=0; i<obj_src.options.length; i++)
 						obj_dest.options[obj_dest.options.length] = new Option( obj_src.options[i].text, obj_src.options[i].value );
 					obj_src.options.length=0;
 				}
 		
 		
 			// ... now back to our regularly scheduled program ...
 			
 			//
 			//  Create YUI Button objects and define "click" handlers
 			//   Note: pass in object containing two select boxes to each handler, 
 			//         and set scope to "true" to make it the "this" object ...
 			//
 				var btnR = new YAHOO.widget.Button("btnR");
 				btnR.on('click', function(){
 					xfrOption( this.left, this.right );
 				}, {left:lbLeft, right:lbRight}, true);		
 		
 				var btnRA = new YAHOO.widget.Button("btnRA");
 				btnRA.on('click', function(){
 					xfrAllOptions( this.left, this.right );
 				}, {left:lbLeft, right:lbRight}, true);		
 		
 				var btnL = new YAHOO.widget.Button("btnL");
 				btnL.on('click', function(){
 					xfrOption( this.right, this.left );
 				}, {left:lbLeft, right:lbRight}, true);		
 							
 				var btnLA = new YAHOO.widget.Button("btnLA");
 				btnLA.on('click', function(){
 					xfrAllOptions( this.right, this.left );
 				}, {left:lbLeft, right:lbRight}, true);		
 							
 				
 			//
 			//  Show how do   
 			//	
 				var btnProc = new YAHOO.widget.Button("btnProcess");
 				btnProc.on("click", function(){
 					var stat = YDom.get("idResults");
 					stat.innerHTML = 'Adding to FORM element :<br/>';
 					for(var i=0; i<this.options.length; i++)  
 						stat.innerHTML += '&lt;input type="hidden" name="mySelections[]" value="' + this.options[i].value + '" /&gt;<br/>';  
 				}, lbRight, true);		

 			})();  // end sandbox anonymous function
 								
 		});  // end onDOMReady
 		
    },
    timeout: 1000,
    combine: true
 });
 
 loader.insert();
 </script>

 </head>

 <body class="yui-skin-sam">

 	<h2>Example : A Pick-List type selector</h2>
 	<p>A pick-list type selector ....
 		  
 	<table>
 		<tr valign="middle">
 			<td>Available:<br/>
 				<select id="idLeft" size="10" style="width:10em;"></select>
 			</td>
 			<td align="center">
 				<button id="btnRA" title="Select All">&gt;&gt;</button><br/>
 				<button id="btnR"  title="Select One">&gt;</button><br/>
 				<button id="btnL"  title="Remove One">&lt;</button><br/>
 				<button id="btnLA" title="Remove All">&lt;&lt;</button>
 			</td>
 			<td>Selected:<br/>
 				<select id="idRight" size="10" style="width:10em;"></select>
 			</td>
 		</tr>
 	</table>

 	<p></p>
 	<p></p>
 	<button id="btnProcess">Process the PickList !!</button>
 	<p></p>
 	<div id="idResults"></div> 

 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<title>YUI PickList Example</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<script src="../yui/build/yuiloader/yuiloader-min.js"></script>

	<style type="text/css">
	body {
	margin-left: 15px;
	padding:0;
	}

	#idResults {
	background-color: #9ff;
	border: 1px solid;
	width: 50%;
	}

	</style>

	<script>
	var loader = new YAHOO.util.YUILoader({

	require: [ 'yuiloader-dom-event', 'fonts', 'button' ],
	loadOptional: true,
	allowRollup:true,

	// The function to call when all script/css resources have been loaded
	onSuccess: function() {

	YAHOO.util.Event.onDOMReady( function() {
	// create a sandbox ...
	(function(){
	//
	// Aliases for YUI placeholders
	//
	var YDom = YAHOO.util.Dom,
	YUtil = YAHOO.util,
	YLang = YAHOO.lang,
	YEvent = YAHOO.util.Event;

	//
	// Make an array of option objects as { value:, text: }
	//
	var jsLarge = [];
	for(var i=0; i<34; i++)
	jsLarge[i] = { value:i+1, text:'Option No. ' + (i+1)};

	//
	// Get DOM references to SELECT list-boxes
	//
	var lbLeft = YDom.get('idLeft');
	var lbRight = YDom.get('idRight');

	//
	// Initially, fill left SELECT with sample data
	//
	for(var i=0; i<jsLarge.length; i++)
	lbLeft.options[lbLeft.options.length] = new Option( jsLarge[i].text, jsLarge[i].value );


	//
	// Define some "helper" functions for transferring options between
	// SELECT boxes
	//
	function xfrOption( obj_src, obj_dest) {
	if ( !YLang.isObject(obj_src) \|\| !YLang.isObject(obj_dest) ) return;
	//
	// If the source SELECT has an item selected,
	// add it to destination SELECT,
	// then delete the one from the source
	//
	if ( obj_src.selectedIndex > -1 ) {
	var opt = obj_src.options[obj_src.selectedIndex];
	obj_dest.options[obj_dest.options.length] = new Option( opt.text, opt.value );
	obj_src.remove( obj_src.selectedIndex );
	}
	}

	function xfrAllOptions( obj_src, obj_dest) {
	if ( !YLang.isObject(obj_src) \|\| !YLang.isObject(obj_dest) ) return;
	//
	// Loop through the source SELECT, adding new options to destination,
	// then zero out the source SELECT quickly by setting array lenth to zero
	//
	for(i=0; i<obj_src.options.length; i++)
	obj_dest.options[obj_dest.options.length] = new Option( obj_src.options[i].text, obj_src.options[i].value );
	obj_src.options.length=0;
	}


	// ... now back to our regularly scheduled program ...

	//
	// Create YUI Button objects and define "click" handlers
	// Note: pass in object containing two select boxes to each handler,
	// and set scope to "true" to make it the "this" object ...
	//
	var btnR = new YAHOO.widget.Button("btnR");
	btnR.on('click', function(){
	xfrOption( this.left, this.right );
	}, {left:lbLeft, right:lbRight}, true);

	var btnRA = new YAHOO.widget.Button("btnRA");
	btnRA.on('click', function(){
	xfrAllOptions( this.left, this.right );
	}, {left:lbLeft, right:lbRight}, true);

	var btnL = new YAHOO.widget.Button("btnL");
	btnL.on('click', function(){
	xfrOption( this.right, this.left );
	}, {left:lbLeft, right:lbRight}, true);

	var btnLA = new YAHOO.widget.Button("btnLA");
	btnLA.on('click', function(){
	xfrAllOptions( this.right, this.left );
	}, {left:lbLeft, right:lbRight}, true);


	//
	// Show how do
	//
	var btnProc = new YAHOO.widget.Button("btnProcess");
	btnProc.on("click", function(){
	var stat = YDom.get("idResults");
	stat.innerHTML = 'Adding to FORM element :<br/>';
	for(var i=0; i<this.options.length; i++)
	stat.innerHTML += '<input type="hidden" name="mySelections[]" value="' + this.options[i].value + '" /><br/>';
	}, lbRight, true);

	})(); // end sandbox anonymous function

	}); // end onDOMReady

	},
	timeout: 1000,
	combine: true
	});

	loader.insert();
	</script>

	</head>

	<body class="yui-skin-sam">

	<h2>Example : A Pick-List type selector</h2>
	<p>A pick-list type selector ....

	<table>
	<tr valign="middle">
	<td>Available:<br/>
	<select id="idLeft" size="10" style="width:10em;"></select>
	</td>
	<td align="center">
	<button id="btnRA" title="Select All">>></button><br/>
	<button id="btnR" title="Select One">></button><br/>
	<button id="btnL" title="Remove One"><</button><br/>
	<button id="btnLA" title="Remove All"><<</button>
	</td>
	<td>Selected:<br/>
	<select id="idRight" size="10" style="width:10em;"></select>
	</td>
	</tr>
	</table>

	<p></p>
	<p></p>
	<button id="btnProcess">Process the PickList !!</button>
	<p></p>
	<div id="idResults"></div>

	</body>
	</html>