Stack Overflow : ตอน จัดเรียง Value ของ Select แบบ Multiple ตามลำดับการเลือกกันเถอะ (Select2)

"Prevent multiple select element from automatically sorting the value assigned to it basis the order of the indexes in the options"

เรื่องของเรื่องมีอยู่ว่า...เมื่อเราใช้ 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){
    // '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;
}

เมื่อเราเรียกฟังก์ชั่น getSelect2MultipleSortValue() พร้อมกับส่ง id ของ Drop-down List ที่ต้องการไปด้วยก็จะได้ข้อมูลออกมาเป็นอาร์เรย์ คือ value และ text ก็สามารถนำไปใช้งานต่อได้เลย

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){
    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);
}

ที่มา : https://stackoverflow.com/questions/19930835/how-to-save-sorting-order-in-select2-field

การเซ็ตค่าให้ 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 

โปรแกรมช่วยสร้างโค้ด ลดเวลาการเขียนโปรแกรม

สนใจสั่งซื้อราคาสุดคุ้ม
http://fastcoding.phpcodemania.com/