Select2 imposta il valore selezionato in HTML

Question

C'è un modo per impostare l'id/testo selezionato in select2 in HTML così come viene visualizzato e selezionato?

Sto usando jQuery select2 versione 4.0.0

questo è il codice:

$("#users").select2({ 
    placeholder: "select user...", 
    escapeMarkup: function (markup) { return markup; }, 
    ajax: { 
     url: "users.json", 
     dataType: 'json', 
     delay: 250, 
     data: function (params) { 
      return { 
       q: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function (response, page) { 
      return { 
       results: response.data 
      }; 
     }, 
     cache: true 
    }, 
    templateResult: function(item){ 
     if (item.loading) { 
      return item.text; 
     } 
     return item.username + " <small><i>(" + item.role + ")</i></small> "; // display data in html 
    }, 
    templateSelection: function(item){ 
     if (item.username){ 
      return item.username + " <small><i>(" + item.role + ")</i></small> "; // select row in html 
     } 
     return item.text; // for placeholder 
    } 
}); 

per impostare il valore selezionato lo faccio:

// bring data for to set selected value, data contains fields data 
var selected_user_id = data.id, 

// this is the content that I need to use as it is HTML content 
selected_user_text_html = data.username + " <small><i>(" + data.role + ")</i></small> ", 

// this is the one that I am using and is not html because there is no way to put html inside a option select item 
selected_user_text_regular = data.username + " (" + data.role + ") "; 

// set selected value 
$("#users").append("<option value='"+selected_user_id+"' selected='selected'>"+selected_user_text_regular+"</option>"); 

// trigger update 
$("#users").trigger("change"); 

c'è un modo posso impostare il testo selezionato in HTML invece del testo normale?

Answer 1

Sì, è possibile. Select2 ha due opzioni utili "templateSelection" e "templateResult" Entrambe sono funzioni e puoi creare qualsiasi wrapper html che desideri. Basta passare le opzioni al metodo select2() con qualcosa di simile ..

var data = [{id: 100, text: "AAAAAA"}, {id: 200, text: "BBBB"}] 

var formatState = function(result) {return $("<b>"+result.text+"</b>")} 
var formatSelection = function(selection){return $("<b>"+selection.text+"</b>") } 

$(".js-example-basic-single").select2({ data:data,templateResult: formatState, templateSelection: formatSelection 
    }).val(100).change(); 

e si dovrebbe vedere la l'opzione con id: 100 è selezionato.

Spero di averti aiutato;

Answer 2

Se ho capito si correttamente,

Secondo l'api https://select2.github.io/examples.html , è possibile impostare il selezionato mettendolo nel codice html e quindi chiamando il JavaScript

var data = [ 
    { id: 0, text: 'enhancement' }, 
    { id: 1, text: 'bug' }, 
    { id: 2, text: 'duplicate' }, 
    { id: 3, text: 'invalid' }, 
    { id: 4, text: 'wontfix' } 
] 

$(".example").select2({ 
    data: data 
}) 

<select class="example"> 
    <option value="3" selected="selected">invalid</option> 
</select> 

Aggiornamento

Supponendo che l'ajax sia chiamato sulla dichiarazione

non saresti in grado di aggiungere l'opzione quando ritorna l'ajax.

ajax: { 
... 
    processResults: function (response, page) { 

      //something like 
      $.each(response.data, function(i, obj) { 
       if(obj.selected) 
       { 
        var elem = $('#users') 
        elem.append($('<option>', { 
         value: obj.value, 
         text : obj.text, 
         selected : "selected" 
        })); 
       } 
      }) 


     return { 
      results: response.data 
     }; 
    }, 
    cache: true 
}, 

aggiornamento anche

considerare quanto segue per sostituire il vostro altro codice o le sue idee

<style> 
    .optionrole{ 
     font-size: small; 
     font-style: italic 
    } 
</style> 

var sUserId = data.id, 
var sUserText = data.username 
         + "<span class="optionrole"> (" 
         + data.role 
         + ")</span> "; 

// set selected value 
var elem = $('#users') 
elem.append($('<option>', { 
    value: sUserId, 
    text : sUserText, 
    selected : "selected" 
})); 

// trigger update 
elem.trigger("change");