เรื่องของเรื่องมีอยู่ว่า...เมื่อเราใช้ Select2 ในการสร้าง Drop-down List และเวลาเลือก option แต่ละตัวเรียบร้อย พอส่งค่าไปใช้งาน มันก็จะเรียงจากบนลงล่าง option ไหนมาก่อน value ก็ไปก่อน แต่ทีนี้เราอยากให้มันเรียงตามลำดับการคลิก จะทำยังไง
ก็เลยค้นด้วยคำง่ายๆไปเลย "select2 multiple value not sort" แล้วก็เล็งกระทู้ของ StackOverflow.Com
แล้วก็ได้กระทู้นี้
https://stackoverflow.com/questions/21875658/prevent-multiple-select-element-from-automatically-sorting-the-value-assigned-to
พอลองทดสอบดู ก็ได้ผลลัพธ์เหมือนดั่งที่ใจเราต้องการจริงๆ
ก็เลยจัดการดัดแปลงนิดๆหน่อยๆ ได้ดังนี้
function getSelect2MultipleSortValue(elem_id){เมื่อเราเรียกฟังก์ชั่น getSelect2MultipleSortValue() พร้อมกับส่ง id ของ Drop-down List ที่ต้องการไปด้วยก็จะได้ข้อมูลออกมาเป็นอาร์เรย์ คือ value และ text ก็สามารถนำไปใช้งานต่อได้เลย
// 'data' brings the unordered list, while 'val' does not
var data = $('#' + elem_id).select2('data');
// Push each item into an array
var finalResult = [];
var finalResultTitle = [];
for( item in $('#' + elem_id).select2('data') ) {
finalResult.push(data[item].id);
finalResultTitle.push(data[item].text.split('-').pop().trim());
};
var data = new Object();
data['value'] = finalResult.join(',');
data['text'] = finalResultTitle.join(',');
// Display the result with a comma
return data;
}
var field_title = getSelect2MultipleSortValue('table_join_detail_field_title');
$('#detail_join_field_title').val(field_title.value;);
$('#detail_join_field_comment').val(field_title.text);
แถมท้ายกันอีกนิดนึง กรณีต้องการนำค่ากลับคือไปใส่ใน select และให้ select2 แสดงขึ้นมาเรียงลำดับตามที่เราเลือกไว้นั้น ก็ใช้ฟังก์ชั่นนี้ หลังจากที่สั่งเซ็ต select2() เรียบร้อยแล้ว
function setDisplaySelect2(elem, title_val){ที่มา : https://stackoverflow.com/questions/19930835/how-to-save-sorting-order-in-select2-field
var choices = [];
for (i = 0; i < title_val.length; i++) {
var option = $('#table_join_detail_field_title option[value="' +title_val[i]+ '"]');
if(option[0]){
choices[i] = {id:title_val[i], text:option[0].label, element: option};
}
}
$(elem).select2('data', choices);
}
การเซ็ตค่าให้ select เพื่อใช้งาน Select2
var attributes_val = "3,1,5".split(',');
elem = '#table_join_detail_field_attribute'
$(elem).val(attributes_val).select2();
setDisplaySelect2(elem, attributes_val);
----------------------------------------------------------------------------------------
สนับสนุนค่ากาแฟผู้เขียนได้ที่
PHP CI MANIA - PHP Code Generator
โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม
