Listbox multi select เหมือน Hotmail
<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=">>" />
<input type="button" id="emailgroup_remove" value="<<" />
<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>
ในโค้ดเป็นฟอร์มรายชื่ออีเมล์ (ชื่อใครก็ไม่รู้) สามารถเลือกพร้อมกันได้หลายรายชื่อ เราอาจ query เอารายชือทั้งหมดออกมาจากฐานข้อมูลสมาชิกก็ได้ และใส่ไว้ในตัวแรก สำหรับในตัวที่ 2 จะเป็นรายชื่อที่ถูกเลือกแล้ว สามารถดูการทำงานและโค้ดเต็มๆได้ที่ ตัวอย่าง
Javascript ในส่วนของ doEmailGroupAction และ doSubmit สามารถแยกออกไว้ในไฟล์ js ได้นะครับ
ส่วนในการรับค่าจากฟอร์มเราสามารถรับได้ที่ $_POST['emailSelected'] โดยรายชื่ออีเมล์ที่เลือกจะถูกคั่นด้วย comma (ดูผลลัพท์ได้จากตัวอย่าง)
หมายเหตุ มีการเรียกใช้งาน GAjax ในสคริปต์นี้ด้วย