<form id="form_test" method="post" action="select.php">
<table><tbody>
<tr>
<td><select class="list" id="userList" size="20" multiple="multiple">
<option value="1000click@gmail.com">1000click@gmail.com</option>
<option value="108bit.host@gmail.com">108bit.host@gmail.com</option>
<option value="1470700483@bu.ac.th">1470700483@bu.ac.th</option>
<option value="14707007483@bu.ac.th">14707007483@bu.ac.th</option>
<option value="16nightclub@gmail.com">16nightclub@gmail.com</option>
<option value="25162516@sanook.com">25162516@sanook.com</option>
<option value="48711066@utcc.ac.th">48711066@utcc.ac.th</option>
<option value="50funds@gmail.com">50funds@gmail.com</option>
<option value="9neo@live.com">9neo@live.com</option>
<option value="9peaks@gmail.com">9peaks@gmail.com</option>
<option value="zz__qq007@hotmail.com">zz__qq007@hotmail.com</option></select></td>
<td style="width:50px;text-align:center">
<input type="button" id="emailgroup_add" value="&gt;&gt;" />
<input type="button" id="emailgroup_remove" value="&lt;&lt;" />
<input type="button" id="emailgroup_clear" value="เคลียร์"/>
</td>
<td style="width:200px"><select id="memberList" size="20" multiple="multiple"></select></td>
</tr>
<tr><td colspan="3"><input type="submit" /></td></tr>
</tbody></table>
<input type="hidden" id="emailSelected" name="emailSelected" />
</form>

<script>
/* ฟังก์ชั่นสำหรับย้ายรายการจาก listbox หนึ่ง ไปยังอีก listbox */
var doEmailGroupAction = function(event) {
 var input = GEvent.element(event);
 var ids = input.id.split('_');
 if(ids[1] == 'add' || ids[1] == 'remove' || ids[1] == 'clear') {
  var src = $E(ids[1] == 'add' ? 'userList' : 'memberList');
  var dest = $G(ids[1] == 'add' ? 'memberList' : 'userList');
  for(var i = src.options.length - 1 ; i >= 0 ; i--) {
   m = src.options[i];
   if (m.selected || ids[1] == 'clear'){
    n = $G(m).copy();
    if (dest.elem.options.length == 0) {
     dest.insert(n);
    } else {
     dest.elem.insertBefore(n.elem, dest.elem.options[0]);
    };
    src.removeChild(m);
   };
  };
 };
};

/*
ฟังก์ชั่นนี้ใช้เพื่ออ่านรายการต่างๆใน memberList
แล้วใส่ลงใน emailSelected (hidden text) โดยคั่นแต่ละรายการด้วย comma
เพื่อทำการ submit
*/
var doSubmit = function(event) {
    var memberList = $E('memberList');
    var result = new Array();
    for( var i = 0 ; i < memberList.options.length ; i++){
        result.push(memberList.options[i].value);
    };
    $E('emailSelected').value = result.join(',');
};

/* จัดการ event ของปุ่มต่างๆ */
$G('emailgroup_add').addEvent('click',doEmailGroupAction);
$G('emailgroup_remove').addEvent('click',doEmailGroupAction);
$G('emailgroup_clear').addEvent('click',doEmailGroupAction);
/* ดัก event submit */
$G('form_test').addEvent('submit',doSubmit);
</script>