2017-08-13 77 views
0

我有一個選擇字段,用戶可以在其中選擇&我正在使用Select2進行多項選擇。Select2:如何在Select2中獲得自定義排序

<select id="currency" name="currency_cc"> 
    <option value="BDT">BDT - Bangladesh</option> 
    <option value="USD">USD - USA</option> 
    <option value="ZWL">ZWL - Zimbabwe</option> 
</select> 

但問題是,如果我從列表中選擇&選項2,然後選擇選項1,然後 地選擇2選項2選項前1 VAL,但我選擇的選項2首。

我希望選項1放在選項2之後,因爲我按照此順序選擇,我該怎麼做?我認爲官方文件沒有任何內容。

但我看到了一個JS小提琴這個工作,我從以下是問答獲得/ A頁: jQuery select2 control - retrieve last selected element

和小提琴是: http://jsfiddle.net/jEADR/1588/

檢查,還有就是它的工作原理是我想要的,但它在我的代碼中並不像這樣。

有人請幫忙。

+0

它也除去被選擇的元素,這不是我希望的方式,這就是爲什麼我不認爲。 – APu

回答

0

我設法使其與下面的代碼工作,(我收集它從別的地方&不再可以從那裏記得)

var $select2 = $('#currency-converter-currencies').select2({ 
      templateSelection: template, 
      width: '100%' 
     }).val({!! $setting->convert_currencies !!}).trigger('change'); 

    // cache order of initial values 
    var defaults = $select2.select2('data'); 
    defaults.forEach(function (obj) { 
     var order = $select2.data('preserved-order') || []; 
     order[order.length] = obj.text; 
     $select2.data('preserved-order', order); 
    }); 

    function select2_renderSelections($select2) { 
     var order = $select2.data('preserved-order') || []; 
     var $container = $select2.next('.select2-container'); 
     var $tags = $container.find('li.select2-selection__choice'); 
     var $input = $tags.last().next(); 

     // apply tag order 
     order.forEach(function (val) { 
      var $el = $tags.filter(function (i, tag) { 
       return $(tag).data('data').id === val; 
      }); 
      $input.before($el); 
     }); 
    } 

    function selectionHandler(e) { 
     var $select2 = $(this); 
     var val = e.params.data.id; 
     var order = $select2.data('preserved-order') || []; 

     switch (e.type) { 
      case 'select2:select': 
       order[order.length] = val; 
       break; 
      case 'select2:unselect': 
       var found_index = order.indexOf(val); 
       if (found_index >= 0) order.splice(found_index, 1); 
       break; 
     } 
     $select2.data('preserved-order', order); // store it for later 
     select2_renderSelections($select2); 
    } 

    $select2.on('select2:select select2:unselect', selectionHandler); 



    /** 
    * Put select option's value instead on text in select box 
    * @param data 
    * @param container 
    */ 
    function template(data, container) { 
     return data.id; 
    } 

在這裏,我們用我們的過濾值替換原來的選擇二值「模板「功能。

這不應該是永久性修復,因爲這種編程方式,將其視爲臨時修復。

希望這將幫助其他人在未來

相關問題