All components dhtmlxForm Usage Move option between selects

Move option between selects

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Move option between selects</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
				{type: "settings", position: "label-top", labelWidth: 160, inputWidth: 160, labelHeight: 20},
				{type: "multiselect", label: "All Contacts", name: "c_all", size: 8, options:[
					{value: "1", text: "Fernando Novick"},
					{value: "2", text: "Ted Spengler"},
					{value: "3", text: "Lilia Horace"},
					{value: "4", text: "Cody Derksen"},
					{value: "5", text: "Mathew Musso"},
					{value: "6", text: "Nelson Brayboy"}
				]},
				{type: "newcolumn"},
				{type: "block", list:[
					{type: "button", name: "add", value: ">>", offsetLeft: 25, offsetTop: 60},
					{type: "button", name: "remove", value: "<<", offsetLeft: 25}
				]},
				{type: "newcolumn"},
				{type: "multiselect", label: "Blocked Contacts", name: "c_blocked", size: 8, options:[
					{value: "7", text: "Harriett Wickwire"},
					{value: "8", text: "Fernando Frerichs"},
					{value: "9", text: "Erik Couey"}
				]}
			];
			myForm = new dhtmlXForm("myForm", formData);
			myForm.attachEvent("onButtonClick",function(name){
				if (name == "add" || name == "remove") {
					changeContactState(name=="add");
				};
			});
		}

		function changeContactState(block) {

			var ida = (block?"c_all":"c_blocked");
			var idb = (block?"c_blocked":"c_all");

			var sa = myForm.getSelect(ida);
			var sb = myForm.getSelect(idb);

			var t = myForm.getItemValue(ida);
			if (t.length == 0) return;
			eval("var k={"+t.join(":true,")+":true};");

			var w = 0;
			var ind = -1;
			while (w < sa.options.length) {
				if (k[sa.options[w].value]) {
					sb.options.add(new Option(sa.options[w].text,sa.options[w].value));
					sa.options.remove(w);
					ind = w;
				} else {
					w++;
				}
			}

			if (sa.options.length > 0 && ind >= 0) {
				if (sa.options.length > 0) sa.options[t.length>1?0:Math.min(ind,sa.options.length-1)].selected = true;
			}

		}

	</script>
</head>
<body onload="doOnLoad();">
	<div id="myForm" style="height: 200px;"></div>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.