Come impostare il valore selezionato di jquery select2?

99

Questo appartiene ai codici precedenti a select2 versione 4

Ho un semplice codice per select2ottenere dati da ajax

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});

Questo codice funziona, tuttavia, ho bisogno di impostare un valore su di esso come se fossi in modalità di modifica. Quando l'utente seleziona un valore per la prima volta, verrà salvato e quando ha bisogno di modificare quel valore deve apparire nello stesso menu di selezione ( select2) per selezionare il valore precedentemente selezionato ma non riesco a trovare un modo.

AGGIORNARE:

Il codice HTML:

<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">

L'accesso programmatico Select2 non funziona con questo.

javascript  php  jquery  ajax  jquery-select2 
— ClearBoth
fonte
Dovresti essere in grado di impostare il valore selezionato in html o usare$("#programid").val()
— Explosion Pills
@ExplosionPills Negative, ho provato anche io ho ottenuto un valore vuoto. Come dovrei usare programid.val ()? Ho ottenuto il valore dal server, quindi devo impostarlo in questo campo nascosto di select2.
— ClearBoth
@ ClearBoth Non sono sicuro di aver capito cosa intendi. Stai tentando di impostare il valore "selezionato" del componente Select2 su uno dei risultati recuperati da AJAX?
— An Phan
@ AnPhan Sì, c'è un modo per farlo?
— ClearBoth
@ClearBoth C'è. Controlla la mia risposta qui sotto.
— An Phan

Risposte:

61

Per impostare dinamicamente il valore "selezionato" di un componente Select2:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Dove il secondo parametro è un oggetto con valori attesi.

AGGIORNARE:

Questo funziona, volevo solo notare che nel nuovo select2, "a_key" è "text" in un oggetto select2 standard. così:{id: 100, text: 'Lorem Ipsum'}

Esempio: 

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

Grazie a @NoobishPro

— An Phan
fonte
1
Stavo provando con l'ID solo select2 ('val', '1') ma non ha funzionato .. Grazie
— ClearBoth
6
Questo funziona, volevo solo notare che nel nuovo select2, "a_key" è "text" in un oggetto select2 standard. quindi: {id: 100, text: 'Lorem Ipsum'}
— NoobishPro
2
lo stesso qui su v4. Mi sono tirato i capelli su questo. Non credo sia possibile senza passare alle soluzioni JavaScript. Alla ricerca di un altro menu a discesa jQuery / Bootstrap Select2 ora (2 giorni di manipolazione di ogni metodo immaginabile - nessuna gioia!)
— MC9000
29
Select2 v4: $('#inputID').val(100).trigger('change') Vedi select2.github.io/…
— Paul
@NoobishPro e An Phan - Grazie per la risposta e il commento
— Sinto
104

SELEZIONA2 <V4

Passaggio 1: HTML

<input name="mySelect2" type="hidden" id="mySelect2">

Passaggio 2: creare un'istanza di Select2

$("#mySelect2").select2({
      placeholder: "My Select 2",
      multiple: false,
      minimumInputLength: 1,
      ajax: {
          url: "/elements/all",
          dataType: 'json',
          quietMillis: 250,
          data: function(term, page) {
              return {
                  q: term,
              };
          },
          results: function(data, page) {
              return {results: data};
          },
          cache: true
      },
      formatResult: function(element){
          return element.text + ' (' + element.id + ')';
      },
      formatSelection: function(element){
          return element.text + ' (' + element.id + ')';
      },
      escapeMarkup: function(m) {
          return m;
      }
});

Passaggio 3: imposta il valore desiderato

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

Se usi select2 senza AJAX puoi fare come segue:

<select name="mySelect2" id="mySelect2">
  <option value="0">One</option>
  <option value="1">Two</option>
  <option value="2">Three</option>
</select>
/* "One" will be the selected option */
$('[name=mySelect2]').val("0");

Puoi anche farlo:

$("#mySelect2").select2("val", "0");

SELECT2 V4

Per select2 v4 è possibile aggiungere direttamente un'opzione / e come segue:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
    <option value="TheID" selected="selected">The text</option>                                                                   
</select>

O con JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
 
$("#myMultipleSelect2").append($newOption).trigger('change');

altro esempio

$("#myMultipleSelect2").val(5).trigger('change');
— tomloprod
fonte
3
trigger ("modifica"); è la parte importante
— mihkov
$ ("# mySelect2"). select2 ("val", "0") - questo attiverà l'evento jquery di modifiche di valore. Come evitare che ciò accada. Di solito quando l'utente invia il modulo, dopo averlo fatto, ripristino tutti i dati del modulo. Il ripristino non ripristinerà select2. L'utilizzo di select2 ("val", "0") attiverà modifiche che è folle poiché nessuna azione da parte dell'utente.
— jumper rbk
— Ryan
Lodato per il .trigger ('modifica')
— JP Dolocanog
23

HTML:

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JavaScript:

$("#lang").select2().select2('val','asp');

jsfiddle

— Ahmad Tarawneh
fonte
2
come impostare tramite testo anziché val
— Rizwan Patel
La domanda era come farlo dopo il caricamento con la chiamata AJAX. Questa risposta non funziona in questo caso.
— MC9000
questo attiverà le modifiche al valore select2 che saranno strane se hai questo evento da elaborare, e si è attivato senza che l'utente lo faccia
— jumper rbk
17

Inoltre, come ho provato, quando uso ajax in select2, i metodi di controllo programmatico per impostare nuovi valori in select2 non funzionano per me! Ora scrivo questo codice per risolvere il problema:

$('#sel')
    .empty() //empty select
    .append($("<option/>") //add option tag in select
        .val("20") //set value for option to post it
        .text("nabi")) //set a text for show in select
    .val("20") //select option of select2
    .trigger("change"); //apply to select2

Puoi testare il codice di esempio completo nel link qui: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
In questo codice di esempio c'è un ajax select2 e puoi impostare un nuovo valore con un pulsante.

Mostra snippet di codice

— Nabi KAZ
fonte
Sto usando displayKey diversi e cose del genere (era una cattiva idea però) - questo aiuta perfettamente per i miei test di accettazione con Codeception
— MonkeyMonkey
2
Noioso, di sicuro, ma, come tutti stanno scoprendo che Select2 v4 semplicemente non ha modo di fare qualcosa di così ridicolmente semplice come impostare una selezione predefinita
— MC9000
Ho trovato questa risposta l'unico modo per rendere select2 v4 - ajax select.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

$('#select_id').append($option).trigger('change');

Prova questa append quindi seleziona. Non duplica l'opzione sulla chiamata AJAX.

— Jigz
fonte
var $ opzione = $ ("<opzione selezionata> </option>") .val ('1'). text ("Scegli me"); $ ('# select_id'). append ($ option) .trigger ('change');
— Jigz
Grazie. lavori confermati sulla versione 4.0.0 (chiamata ajax)
— khalil
Un altro successo confermato sulla versione 4 con ajax.
— un programmatore
Se stai usando una casella ricercabile con ajax, questa è la soluzione giusta. Questo ha funzionato per me giugno 2019.
— Eric Skiff,
12

Mi è piaciuto questo-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
fonte
2
Fornisci alcune spiegazioni per aiutare gli utenti a capire come funziona il tuo codice e per rispondere alla domanda dell'OP.
— Ivan
@ Ivan, stavo facendo così $ ("# drpServices"). Val ("0"); che non selezionerà il tag nel menu a discesa select2, per influenzare sia il valore che il testo è necessaria la funzione di modifica del trigger di select2. Funziona perfettamente per me. Spero che gli utenti capiscano.
— Ashi
9

Nella versione corrente su select2- v4.0.1 puoi impostare il valore in questo modo:

var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });

// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

using "trigger(change)"
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

using destroy: 
<select class="js-example-programmatic">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
  <optgroup label="Mountain Time Zone">
    <option value="AZ">Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NM">New Mexico</option>
    <option value="ND">North Dakota</option>
    <option value="UT">Utah</option>
    <option value="WY">Wyoming</option>
  </optgroup>
  <optgroup label="Central Time Zone">
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="IL">Illinois</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="OK">Oklahoma</option>
    <option value="SD">South Dakota</option>
    <option value="TX">Texas</option>
    <option value="TN">Tennessee</option>
    <option value="WI">Wisconsin</option>
  </optgroup>
  <optgroup label="Eastern Time Zone">
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="IN">Indiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="OH">Ohio</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WV">West Virginia</option>
  </optgroup>
</select>

<button class="js-programmatic-set-val">set value</button>
Espandi lo snippet

— Mosh Feu
fonte
Come posso impostare il valore senza attivare l'evento di modifica? L'evento di modifica attiva i miei gestori di eventi che sono destinati a quando l'utente modifica manualmente il valore.
— enumag
L'altra opzione è destroyrichiamare nuovamente il plug-in .. Vedere il codice aggiornato ..
— Mosh Feu
C'è un modo per ottenere le opzioni che ho originariamente passato a select2 in modo da non doverle duplicare? Comunque questa soluzione sembra più un hack.
— enumag
Certo che è hach. Il modo ufficiale secondo i documenti è di attivare l'evento di modifica.so that I wouldn't have to duplicate themPerché è necessario duplicarli? Quando si esegue destroyl' selectè ancora lì con tutto il suo options.
— Mosh Feu
Intendevo le opzioni passate a select2:$example.select2({ ... this ... })
— enumag
6

Per Ajax, usa $(".select2").val("").trigger("change"). Questo dovrebbe risolvere il problema.

— Sab
fonte
6

Penso che tu abbia bisogno della initSelectionfunzione

$("#programid").select2({
  placeholder: "Select a Program",
  allowClear: true,
  minimumInputLength: 3,
  ajax: {
    url: "ajax.php",
    dataType: 'json',
    quietMillis: 200,
    data: function (term, page) {
      return {
        term: term, //search term
        flag: 'selectprogram',
        page: page // page number
      };
    },
    results: function (data) {
      return {results: data};
    }
  },
  initSelection: function (element, callback) {
    var id = $(element).val();
    if (id !== "") {
      $.ajax("ajax.php/get_where", {
        data: {programid: id},
        dataType: "json"
      }).done(function (data) {
        $.each(data, function (i, value) {
          callback({"text": value.text, "id": value.id});
        });
        ;
      });
    }
  },
  dropdownCssClass: "bigdrop",
  escapeMarkup: function (m) { return m; }
});
— Ahmad Tarawneh
fonte
Funziona. Ma è deprecato a partire dalla versione 4.0
— VisualBean
5

HTML

<select id="lang" >
   <option value="php">php</option>
   <option value="asp">asp</option>
   <option value="java">java</option>
</select>

JS

 $("#lang").select2().val('php').trigger('change.select2');

fonte: https://select2.github.io/options.html

— NaveenDA
fonte
5

In Select2 V.4

uso $('selector').select2().val(value_to_select).trigger('change');

Penso che dovrebbe funzionare

— Akash sharma
fonte
3

Imposta il valore e attiva immediatamente l'evento di modifica.

$('#selectteam').val([183,182]).trigger('change');
— manoj patel
fonte
Grazie lo stesso giorno mio
— Jaydeep purohit
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Ho risolto il mio problema con questo semplice codice. Dove #select_location_id è un ID della casella di selezione e il valore è il valore di un'opzione elencata nella casella di selezione2.

— Numan Pathan
fonte
2

La risposta di An Phan ha funzionato per me:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Ma l'aggiunta della modifica attiva l'evento

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
fonte
1
Ottengo l'errore "Uncaught TypeError: $ (...). Select2 (...). Change is not a function (...)" quando lo faccio in questo modo. Non penso sia possibile con la versione 4.x di Select2 - niente qui funziona con ajax.
— MC9000
2

puoi usare questo codice:

$("#programid").val(["number:2", "number:3"]).trigger("change");

dove 2 in "numero: 2" e 3 in "numero: 3" sono il campo id nell'array di oggetti

— HamidReza
fonte
1

A volte, select2()verrà caricato per primo e questo fa sì che il controllo non mostri correttamente il valore selezionato in precedenza. Mettere un ritardo di alcuni secondi può risolvere questo problema.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);
— Poornima
fonte
1 
$('#inputID').val("100").select2();

Sarebbe più appropriato fare domanda select2dopo aver scelto una delle selezioni correnti.

— Mehmet Ali Ulusan
fonte
0

Ho fatto qualcosa del genere per preimpostare gli elementi nel menu a discesa di select2 ajax

      //preset element values
        $(id).val(topics);
       //topics is an array of format [{"id":"","text":""}, .....]
          setTimeout(function(){
           ajaxTopicDropdown(id,
                2,location.origin+"/api for gettings topics/",
                "Pick a topic", true, 5);                      
            },1);
        // ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
— Ajeet Lakhani
fonte
0

Dovresti usare:

var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');

// For set multi selected values
var data =  [];//Array Ids
var option =  [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
    // append the new option
    $("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');

    // get a list of selected values if any - or create an empty array
    var selectedValues = $("#EventId").val();
    if (selectedValues == null) {
        selectedValues = new Array();
    }
    selectedValues.push(response.id);   // add the newly created option to the list of selected items
    $("#EventId").val(selectedValues).trigger('change');   // have select2 do it's thing
});
— Xman Classical
fonte
0

Se si utilizza una casella di input, è necessario impostare la proprietà "multiple" con il valore "true". Per esempio,

<script>
    $(document).ready(function () {

        var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
            { id: 200, text: 'Lorem Ipsum 2'}];

        $('#inputID').select2({
            data: arr,
            width: 200,
            multiple: true
        });
    });
</script>
— Arun Banik
fonte
0

In select2 < version4v'è la possibilità initSelection()per il caricamento dei dati a distanza, attraverso il quale è possibile impostare il valore iniziale per l'ingresso come in modalità di modifica.

$("#e6").select2({
    placeholder: "Search for a repository",
    minimumInputLength: 1,
    ajax: { 
        // instead of writing the function to execute the request we use Select2's convenient helper
        url: "https://api.github.com/search/repositories",
        dataType: 'json',
        quietMillis: 250,
        data: function (term, page) {
            return {
                q: term, // search term
            };
        },
        results: function (data, page) {
            // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter the remote JSON data
            return { results: data.items };
        },
        cache: true
    },
    initSelection: function(element, callback) {
        // the input tag has a value attribute preloaded that points to a preselected repository's id
        // this function resolves that id attribute to an object that select2 can render
        // using its formatResult renderer - that way the repository name is shown preselected
        var id = $(element).val();
        if (id !== "") {
            $.ajax("https://api.github.com/repositories/" + id, {
                dataType: "json"
            }).done(function(data) { callback(data); });
        }
    },
    formatResult: repoFormatResult, // omitted for brevity, see the source of this page
    formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});

Documentazione sorgente: Select2 - 3.5.3

— Sairam Suresh
fonte
0

Solo per aggiungere a chiunque altro possa aver avuto lo stesso problema con me.

Stavo cercando di impostare l'opzione selezionata delle mie opzioni caricate dinamicamente (da AJAX) e stavo cercando di impostare una delle opzioni come selezionata a seconda di una logica.

Il mio problema si è verificato perché non stavo cercando di impostare l'opzione selezionata in base all'ID che deve corrispondere al valore, non al valore che corrisponde al nome!

— Glen
fonte
0

Per più valori qualcosa del genere:

$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));

che si tradurrà in qualcosa di simile

$("#HouseIds").select2("val", [35293,49525]);
— Robert Benyi
fonte
0

Questo può aiutare qualcuno a caricare i dati select2 da AJAX durante il caricamento dei dati per la modifica ( applicabile per selezione singola o multipla ):

Durante il caricamento del modulo / modello:

  $.ajax({
        type: "POST",
        ...        
        success: function (data) {
          selectCountries(fixedEncodeURI(data.countries));
         }

Chiama per selezionare i dati per Select2:

var countrySelect = $('.select_country');
function selectCountries(countries)
    {
        if (countries) {
            $.ajax({
                type: 'GET',
                url: "/regions/getCountries/",
                data: $.param({ 'idsSelected': countries }, true),

            }).then(function (data) {
                // create the option and append to Select2                     
                $.each(data, function (index, value) {
                    var option = new Option(value.text, value.id, true, true);
                    countrySelect.append(option).trigger('change');
                    console.log(option);
                });
                // manually trigger the `select2:select` event
                countrySelect.trigger({
                    type: 'select2:select',
                    params: {
                        data: data
                    }
                });
            });
        }
    }

e se potresti avere problemi con la codifica puoi cambiare come tuo requisito:

function fixedEncodeURI(str) {
        return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");

    }
— Kamran Ul Haq
fonte
0

se stai ottenendo i tuoi valori da ajax, prima di chiamare 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
Espandi lo snippet

confermare che la chiamata ajax è stata completata, utilizzando la funzione jquery quando

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
      // the code here will be executed when all four ajax requests resolve.
      // a1, a2, a3 and a4 are lists of length 3 containing the response text,
      // status, and jqXHR object for each of the four ajax calls respectively.
    });
Espandi lo snippet
come descritto qui [ Attendere finché tutte le richieste jQuery Ajax sono state completate?

— victor mwangi
fonte
0

Per costruire in cima alla risposta di @ tomloprod. Per la strana possibilità che tu stia usando x-editable , e hai un campo select2 (v4) e hai più elementi che devi preselezionare. Puoi usare la seguente parte di codice:

$("#select2field").on("shown", function(e, editable){
    $(["test1", "test2", "test3", "test4"]).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});

ed eccolo in azione:

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

$("#select2field").editable({
        type: "select2",
        url: './',
        name: 'select2field',
        savenochange: true,
        send: 'always',
        mode: 'inline',
        source: data,
        value: "bug, wontfix",
        tpl: '<select style="width: 201px;">',
        select2: {
            width: '201px',
            tags: true,
            tokenSeparators: [',', ' '],
            multiple: true,
            data:data
        },
        success: function(response, newValue) {
            console.log("success")
        },
        error: function(response, newValue) {
            if (response.status === 500) {
                return 'Service unavailable. Please try later.';
            } else {
                return response.responseJSON;
            }
        }
    });

var preselect= [
    {
        id: 1,
        text: 'bug'
    },
    {
    id: 4,
    text: 'wontfix'
}
];

 $("#select2field").on("shown", function(e, editable){
    $(preselect).each(function(k, v){
        // Create a DOM Option and pre-select by default~
        var newOption = new Option(v.text, v.id, true, true);
        // Append it to the select
        $(editable.input.$input).append(newOption).trigger('change');
     });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

<a id="select2field">bug, wontfix</a>
Espandi lo snippet

Immagino che funzionerebbe anche se non stai usando x-editable. Spero che possa aiutare qualcuno.

— Renier
fonte
0

Puoi usare questo codice:

    $('#country').select2("val", "Your_value").trigger('change');

Metti il ​​valore desiderato invece di Your_value

Spero che funzioni :)

— Spirito di soluzione
fonte
-2

Bello e facile:

document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";

E passi all'ID id_citydella tua selezione.

Modifica: dopo il commento di Glen mi rendo conto che dovrei spiegare perché e come ha funzionato per me:

Avevo reso il select2lavoro davvero piacevole per la mia forma. L'unica cosa che non potevo far funzionare era mostrare il valore attualmente selezionato durante la modifica. Stava cercando un'API di terze parti, salvando nuovi record e modificando vecchi record. Dopo un po 'ho capito che non avevo bisogno di impostare correttamente il valore, solo l'etichetta all'interno del campo, perché se l'utente non cambia il campo, non succede nulla. Dopo aver cercato e cercato molte persone che hanno problemi con esso, ho deciso di farlo con Javascript puro. Ha funzionato e ho postato forse per aiutare qualcuno. Suggerisco anche di impostare un timer per questo.

— bonafernando
fonte
Questa risposta è un terribile trucco che non imposterebbe nemmeno correttamente il valore.
— Glen
Mi dispiace per questo. Modificherò la mia risposta per spiegare perché l'ho pubblicata.
— bonafernando
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.