select area

/**
* create category widget
*
* @param target       {WAPIObject} default value is body.
* @param selected     {Array}      the options show in left box.
* @param data         {JSON}       the data of category widget.
* @param optionName   {String}     option name which will be submit by post method.
* @param space        {Int}        center space which around add&delete button.
* @param width        {Int}        widget width.
* @param height       {Int}        widget height.
* @param boxCss       {String}
* @param areaCss      {String}
* @param leftAreaCss  {String}
* @param rightAreaCss {String} 
* @param norOptionCss {String}
* @param curOptionCss {String}
* @param btnCss       {String}
* @param addBtnCss    {String}
* @param deleteBtnCss {String}
* @param addBtnText   {String}
* @param deleteBtnText{String}
*
*/
var categoryOptions = function(params){
	this.options = {
		target:wapi("body"),
		selected:[],
		data:{},
		optionName:"categoryId[]",
		
		space:20,
		600,
		height:360,
		
		boxCss:"",
		
		areaCss:"height:100%; overflow:auto; border:1px solid #3366FF; border-radius:5px; box-shadow:#8f8f8f 0 0 5px; -moz-border-radius:5px; -moz-box-shadow:#8f8f8f 0 0 5px; -webkit-border-radius:5px; -webkit-box-shadow:#8f8f8f 0 0 5px;",
		leftAreaCss:"",
		rightAreaCss:"",
		
		norOptionCss:"padding:5px; min-height:15px; background-image:none; background:#FFFFFF; color:#086CAF;",		
		curOptionCss:"padding:5px; min-height:15px; background:url(images/bg_03.png) #086CAF repeat-x left bottom; color:#FFFFFF;",
		
		btnCss:"background:url(images/bg_05.png) #dddddd repeat-x left bottom; color:#333; display:block; 80px; height:25px; line-height:25px; text-align:center; border:1px solid #aaaaaa;",		
		addBtnCss:"top:30px;",
		deleteBtnCss:"top:60px;",
		addBtnText:"<b><<</b>",
		deleteBtnText:"<b>>></b>"
	};
	
	wapi.extend(this.options, params);
	
	this.addOption = [];
	
	this.delOption = [];
	
	this.init();
}

categoryOptions.prototype = {
	init:function(){
		var optionHandler = wapi.bindScope(this, this.optionHandler);
		var addHandler = wapi.bindScope(this, this.addHandler);
		var deleteHandler = wapi.bindScope(this, this.deleteHandler);
		
		this.box = wapi("<div>").attr("style", this.options.boxCss).css({this.options.width, height:this.options.height, position:"relative"});
	
		this.area1 = wapi("<div>").attr({id:"area1", style:this.options.areaCss + this.options.leftAreaCss}).css({position:"absolute"});
		
		this.area2 = wapi("<div>").attr({id:"area2", style:this.options.areaCss + this.options.rightAreaCss}).css({position:"absolute"});
		
		this.addBtn = wapi("<a>").attr("style",this.options.btnCss + this.options.addBtnCss).html(this.options.addBtnText).css({position:"relative", cursor:"pointer"}).click(addHandler);
		
		this.deleteBtn = wapi("<a>").attr("style",this.options.btnCss+ this.options.deleteBtnCss).html(this.options.deleteBtnText).css({position:"relative", cursor:"pointer"}).click(deleteHandler);
		
		this.options.target.append(this.box.append(this.area1).append(this.area2).append(this.addBtn).append(this.deleteBtn));
		
		var areaWidth = parseFloat(this.options.width)/2 - parseFloat(this.addBtn.css("width"))/2 - parseFloat(this.options.space);
		
		this.area1.css("width", areaWidth + "px");
		
		this.area2.css({areaWidth + "px", left:parseFloat(this.area1.css("width")) + parseFloat(this.addBtn.css("width")) + this.options.space*2 + "px"});
		
		var btnLeft = parseFloat(this.area1.css("width")) + this.options.space;
		
		this.addBtn.css({left: btnLeft + "px"});
		
		this.deleteBtn.css({left: btnLeft + "px"});
		
		wapi.each(this.options.data, optionHandler);
	},
	
	optionHandler:function(id, content){			
		var option = wapi("<div>").attr({id:this.options.optionName + id, style:this.options.norOptionCss}).html(content).mouseover(function(){
			this.style.cssText = curCss + "cursor:pointer;";
			
			window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();			
		}).mouseout(function(){
			this.style.cssText = norCss;
		});
		
		option[0].data =  wapi("<input>").attr({name:this.options.optionName, type:"hidden", value:id});
		
		var selected = false;
		var curCss = this.options.curOptionCss;
		var norCss = this.options.norOptionCss;	
		var clickHandler = wapi.bindScope(this, this.clickHandler);	
		
		wapi.each(this.options.selected, function(i, index){
			if(id == index) {
				selected = true;
				return false;
			}
		});
		
		if(selected) this.area1.append(option.append(option[0].data).click(function(){
			clickHandler(this, false, false);
		}).dblclick(function(){
			clickHandler(this, false, true);
		}));
		else this.area2.append(option.click(function(){
			clickHandler(this, true, false);
		}).dblclick(function(){
			clickHandler(this, true, true);
		}));
	},
	
	clickHandler:function(elem, isAdd, isdbl){
		window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
		var norCss = this.options.norOptionCss;
		var clickHandler = wapi.bindScope(this, this.clickHandler);
		
		if(isdbl){
			if(isAdd) this.area1.append(wapi(elem).append(elem.data).attr({"class":"", style:norCss}).mouseout(function(){
				this.style.cssText = norCss;
			}).click(function(){
				clickHandler(this, false);
			}).dblclick(function(){
				clickHandler(this, false, true);
			}));
			else{
				this.area2.append(wapi(elem).attr({"class":"", style:norCss}).mouseout(function(){
					this.style.cssText = norCss;
				}).click(function(){
					clickHandler(this, true);
				}).dblclick(function(){
					clickHandler(this, true, true);
				}));
				elem.data.remove();
			}
		}else{
			if(wapi(elem).attr("class") == "selected_option"){
				var _array = [];
				
				wapi(elem).attr("class", "");
				elem.onmouseout = function(){this.style.cssText = norCss;};
				wapi.each((isAdd ? this.addOption : this.delOption), function(i, option){
					if(option.id != elem.id) _array.push(option);
				});
				isAdd ? this.addOption = _array : this.delOption = _array;
			}else{
				isAdd ? this.addOption.push(elem) : this.delOption.push(elem);
				wapi(elem).attr("class", "selected_option");
				elem.onmouseout = function(){};
			}
		}
	},
	
	addHandler:function(){
		var area1 = this.area1;
		var norCss = this.options.norOptionCss;
		var clickHandler = wapi.bindScope(this, this.clickHandler);
		
		if(this.addOption.length > 0) wapi.each(this.addOption, function(i, elem){
			area1.append(wapi(elem).append(elem.data).attr({"class":" ", style:norCss}).mouseout(function(){
				this.style.cssText = norCss;
			}).click(function(){
				clickHandler(this, false);
			}).dblclick(function(){
				clickHandler(this, false, true);
			}));
		});
		
		this.addOption = [];
	},
	
	deleteHandler:function(){
		var area2 = this.area2;
		var norCss = this.options.norOptionCss;
		var clickHandler = wapi.bindScope(this, this.clickHandler);
		
		if(this.delOption.length > 0) wapi.each(this.delOption, function(i, elem){
			area2.append(wapi(elem).attr({"class":" ", style:norCss}).mouseout(function(){
				this.style.cssText = norCss;
			}).click(function(){
				clickHandler(this, true);
			}).dblclick(function(){
				clickHandler(this, true, true);
			}));
			elem.data.remove();
		});
		
		this.delOption = [];
	}
}

-------------------------------------------------------------------------------------------------------------------------------------------------

test page:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title>
<style>
/*basic*/
body, div, dl, dt, dd, ul, li, h1, h2, input, textarea, p, form { margin: 0; padding: 0; }
body { font: 14px Arial, serif; color:#333333; height:100%; }
body, td, textarea { word-break: break-all; word-wrap: break-word; }
ul, li { margin: 0; padding: 0; list-style: none; list-style-type: none; }
img { border: none; vertical-align:baseline; }
a { text-decoration:none; }
a:hover { text-decoration:none; }
h1 { font-size: 1.32em; font-family:Arial, sans-serif; font-weight: bold; }
h2 { font-size: 1.12em; font-family:Arial, sans-serif; font-weight:bold; }
.clear:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear { zoom:1; }
.zoom { overflow: hidden; zoom: 1; }
</style>
<script src="images/wishfi.js" type="text/javascript" ></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<script>
var option = new categoryOptions({
	selected:[1,2,3],
	data:{
		1: "TELECO NETWK,FIXED&MOBILEPHONE",
		2: "INTERNET SP/PORTAL ALL",
		3: "BANKING/FINANCE",
		4: "AIRLINES",
		5: "GOVT SVCS(STAT BOARD,GOVT CAMPAIGN)",
		6: "CREDIT/CHARGE/DEBIT CARD/TRAVEL",
		7: "MOVIE",
		8: "INSURANCE",
		9: "LOTTERIES/COMPETITIONS",
		10: "HOTELS/RESORTS",
		11: "PHOTOGRAPHIC",
		12: "HAIR CARE PRODUCTS",
		13: "FASTFOOD OUTLETS",
		14: "EDUCATION(OTHERS)",
		15: "BEAUTY&FITNESS SVCS",
		16: "TRAVEL AGENCIES/TOURIST COMMIS",
		17: "ALL CARS+MOTORING",
		18: "SPORTS/GYM EQUIPMENT/SPORTS CTR/CLUB",
		19: "PC/NOTEBOOK/TABLET PC/SERVER/N",
		20: "SKIN CARE PRODUCTS",
		21: "OPTICALS",
		22: "FREIGHT/LOGISTICS/COURIER/SHIP",
		23: "EVENTS/ CONCERTS/ EXHIBTIONS ALL",
		24: "TELEVISION",
		25: "INVESTMENT/FUNDS",
		26: "CONFECTIONARY ALL",
		27: "BEER&STOUT ALL",
		28: "SUPER/HYPER/MINI MARKET/FOOD STORES",
		29: "PERFUME/COLOGNE",
		30: "AUDIO VISUAL EQUIPMENT",
	}
});
</script>
</body>
</html>