"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