2017-08-13 20 views
0

J'ai un champ de sélection où les utilisateurs peuvent sélectionner & J'utilise Select2 pour la sélection multiple.Select2: Comment obtenir tri personnalisé dans 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> 

Mais le problème est de savoir si je sélectionne l'option 2 de la liste & puis sélectionnez l'option 1, puis Select2 lieux option 1 val avant l'option 2, mais je choisi l'option 2 en premier.

Je veux que l'option 1 soit placée après l'option 2 comme j'ai choisi dans cet ordre, Comment est-ce que je peux faire ceci? Je pense qu'il n'y a rien sur la documentation officielle.

Mais je vu ce travail dans un JS Fiddle que je reçois de la Q/A page suivante: jQuery select2 control - retrieve last selected element

et le violon est: http://jsfiddle.net/jEADR/1588/

Vérifiez, il y a cela fonctionne comme je le voulais, mais ça ne se comporte pas comme ça dans mon code.

Quelqu'un s'il vous plaît aider.

+0

Il est aussi enlever l'élément qui a été sélectionné, ce qui est ma manière souhaitée, c'est la raison pour laquelle je ne l'ai pas considéré que. – APu

Répondre

0

j'ai réussi à le faire fonctionner avec le code suivant, (je retirasse d'ailleurs & ne peut plus se rappeler d'où)

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

Ici, nous remplacer les valeurs de Select2 originales avec nos valeurs filtrées en utilisant le " modèle "fonction.

Cela ne devrait pas être le correctif permanent, Considérez-le comme une solution temporaire en raison de la façon dont cela programmé.

Espérons que cela aidera quelqu'un d'autre dans l'avenir