<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript Multi-Select for select list</title>
<script type="text/javascript" src="ListItems.js"></script>
<script type="text/javascript" src="SelectList.js"></script>
<style type="text/css">
body, select{
font-family:Tahoma;font-size:8pt
}
a{
text-decoration:none;
color:red;
}
a:hover{
background-color:yellow;
}
</style>
<script type="text/javascript">
function $get(ID){return document.getElementById(ID);}
var second, first;
function load(){
second = new selectlist("secondbox");
second.load();
first = new selectlist("firstbox");
var country = new generic.list();
country.add({name:"Iran, Islamic republic of",code:"IR"});
country.add({name:"Japan",code:"JP"});
country.add({name:"Suadi Arabia",code:"SU"});
country.add({name:"Pakestan",code:"PK"});
var myds = new selectlist("my_ds");
myds.options = country;
myds.setValue("code");
myds.setDisplay("name");
myds.build();
var obj = myds.newObject('mahdi',10);
}
function sel(el){
alert(el.options[el.selectedIndex].value);
}
</script>
</head>
<body onload="load()">
<label for="my_ds">Please Select Country:</label><select onchange="sel(this)" id="my_ds"></select>
<br /><br />
<div style="text-align:center;">
<select id="firstbox" multiple="multiple" style="width: 500px; height: 150px" name="first">
<option>[1,1] Who this book is for</option>
<option>[1,2] How this book is organized</option>
<option>[1,3] The Linux+ certification exam</option>
<option>[1,4] Tips for succeeding on the Linux+ certification exam</option>
<option>[1,5] CPUs and memory</option>
</select>
<br />
<a href="javascript:second.addFrom('firstbox',true)">Add selected to bottom box</a> | <a href="javascript:first.addFrom('secondbox',true)">Remove selected from bottom box</a>
<br />
<select id="secondbox" multiple="multiple" style="width: 500px; height: 150px" name="second">
<option>[2,1] How prepare for linux+ exam?
</option>
<option>[2,2] How we learn and how do exam?</option>
<option>[2,3] How to use mouse and keyboard?</option>
<option>[2,4] How Computer's power supply work?</option>
</select>
<br />
<a href="javascript:second.move(true)">Up selection</a> | <a href="javascript:second.move(false)">Down selection</a>
</div>
<div id="info"></div>
</body>
</html>
