Wie setze ich den ausgewählten Wert von jquery select2?

98

Dies gehört zu den Codes vor select2 Version 4

Ich habe einen einfachen Code select2, um Daten von Ajax zu erhalten

$("#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; }
});

Dieser Code funktioniert, ich muss jedoch einen Wert festlegen, als ob er sich im Bearbeitungsmodus befindet. Wenn der Benutzer zum ersten Mal einen Wert auswählt, wird dieser gespeichert. Wenn er diesen Wert bearbeiten muss, muss er im selben Auswahlmenü angezeigt werden (select2 ) angezeigt werden, um den zuvor ausgewählten Wert auszuwählen, aber ich kann keinen Weg finden.

AKTUALISIEREN:

Der HTML-Code:

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

Der programmgesteuerte Zugriff von Select2 funktioniert damit nicht.

javascript  php  jquery  ajax  jquery-select2 
— Lösche beide
quelle
Sie sollten in der Lage sein, den ausgewählten Wert einfach im HTML- $("#programid").val()
— Explosion Pills
@ExplosionPills Negativ, das habe ich auch versucht, ich habe einen leeren Wert bekommen. Wie soll ich programid.val () verwenden? Ich habe den Wert vom Server erhalten und muss ihn dann in dieses versteckte Feld von select2 setzen.
— ClearBoth
@ClearBoth Ich bin mir nicht sicher, ob ich verstehe, was du meinst. Versuchen Sie, den "ausgewählten" Wert der Select2-Komponente auf eines der von AJAX abgerufenen Ergebnisse festzulegen?
— Ein Phan
@AnPhan Ja, gibt es eine Möglichkeit das zu tun?
— ClearBoth
@ClearBoth gibt es. Überprüfen Sie meine Antwort unten.
— Ein Phan

Antworten:

60

So stellen Sie den "ausgewählten" Wert einer Select2-Komponente dynamisch ein:

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

Wobei der zweite Parameter ein Objekt mit erwarteten Werten ist.

AKTUALISIEREN:

Dies funktioniert, nur um Notiz wollte , dass in der neuen select2, „A_Key“ ist „Text“ in einem Standard - select2 Objekt. so:{id: 100, text: 'Lorem Ipsum'}

Beispiel: 

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

Vielen Dank an @NoobishPro

— Ein Phan
quelle
1
Ich habe versucht, mit der ID nur select2 ('val', '1'), aber es hat nicht funktioniert. Danke
— ClearBoth
6
Dies funktioniert, ich wollte nur beachten, dass in der neuen select2 "a_key" "Text" in einem Standard-select2-Objekt ist. also: {id: 100, text: 'Lorem Ipsum'}
— NoobishPro
2
das gleiche hier auf v4. Ich habe mir hier die Haare ausgezogen. Ich denke nicht, dass es möglich ist, ohne auf JavaScript-Lösungen zuzugreifen. Suchen Sie jetzt nach einem anderen Dropdown-Menü für jQuery / Bootstrap Select2 (2 Tage, in denen Sie an allen erdenklichen Methoden
— herumgespielt haben
28
Select2 v4: $('#inputID').val(100).trigger('change') Siehe select2.github.io/…
— Paul
@ NoobishPro & An Phan - Danke für die Antwort & Kommentar
— Sinto
103

SELECT2 <V4

Schritt 1: HTML

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

Schritt 2: Erstellen Sie eine Instanz von 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;
      }
});

Schritt 3: Stellen Sie den gewünschten Wert ein

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

Wenn Sie select2 ohne AJAX verwenden , können Sie wie folgt vorgehen :

<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");

Sie können dies auch tun:

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

SELECT2 V4

Für select2 v4 können Sie eine oder mehrere Optionen direkt wie folgt anhängen:

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

Oder mit JQuery:

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

anderes Beispiel

$("#myMultipleSelect2").val(5).trigger('change');
— Tomloprod
quelle
2
Trigger ('change'); ist der wichtige Teil
— Mihkov
$ ("# mySelect2"). select2 ("val", "0") - Dies löst ein Abfrageereignis von Wertänderungen aus. So verhindern Sie dies. Normalerweise setze ich beim Senden eines Formulars durch den Benutzer alle Formulardaten zurück. Durch Zurücksetzen wird select2 nicht zurückgesetzt. Die Verwendung von select2 ("val", "0") löst Änderungen aus, was verrückt ist, da der Benutzer keine Aktion ausführt.
— Jumper rbk
— Ryan
Empfohlen für den .trigger ('change')
— 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
quelle
2
wie man durch Text anstatt val setzt
— Rizwan Patel
Die Frage war, wie dies nach dem Laden mit AJAX-Aufruf zu tun ist. Diese Antwort funktioniert in diesem Fall nicht.
— MC9000
Dies wird Select2-Wertänderungen auslösen, die seltsam sind, wenn Sie dieses Ereignis verarbeiten müssen, und es wird ausgelöst, ohne dass der Benutzer es tut
— Jumper RBB
17

Auch wenn ich versucht habe, Ajax in select2 zu verwenden, funktionieren die programmatischen Steuermethoden zum Festlegen neuer Werte in select2 bei mir nicht! Jetzt schreibe ich diesen Code, um das Problem zu beheben:

$('#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

Sie können den vollständigen Beispielcode unter folgendem Link testen: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
In diesem Beispielcode befindet sich ein Ajax select2, und Sie können einen neuen Wert mit einer Schaltfläche festlegen.

Code-Snippet anzeigen

— Nabi KAZ
quelle
Ich verwende verschiedene DisplayKey und andere Dinge (war allerdings eine schlechte Idee) - dies hilft mir bei meinen Abnahmetests mit Codeception perfekt
— MonkeyMonkey
2
Sicherlich mühsam, aber wie jeder herausfindet, hat Select2 v4 einfach keine Möglichkeit, etwas so lächerlich Einfaches zu tun, wie eine Standardauswahl
— festzulegen
Ich fand, dass diese Antwort die einzige Möglichkeit ist, select2 v4 - ajax select zu machen.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

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

Versuchen Sie diesen Anhang und wählen Sie dann. Dupliziert die Option beim AJAX-Aufruf nicht.

— Jigz
quelle
var $ option = $ ("<Option ausgewählt> </ option>") .val ('1'). text ("Pick me"); $ ('# select_id'). append ($ option) .trigger ('change');
— Jigz
Vielen Dank. bestätigte Arbeiten an Version 4.0.0 (Ajax-Aufruf)
— Khalil
Ein weiterer bestätigter Erfolg auf Version 4 mit Ajax.
— Ein Kodierer
Wenn Sie ein durchsuchbares Feld mit Ajax verwenden, ist dies die richtige Lösung. Dieser arbeitete für mich Juni 2019.
— Eric Skiff
12

Mir hat das gefallen-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
quelle
2
Bitte geben Sie einige Erklärungen an, damit Benutzer die Funktionsweise Ihres Codes verstehen und die Frage des OP beantworten können.
— Ivan
@Ivan, ich habe das so gemacht $ ("# drpServices"). Val ("0"); Damit wird der Text in der Dropdown-Liste select2 nicht ausgewählt. Um sowohl den Wert als auch den Text zu beeinflussen, benötigen wir die Triggeränderungsfunktion von select2. Das funktioniert perfekt für mich. Ich hoffe, die Benutzer werden verstehen.
— Ashi
9

In der aktuellen Version auf select2- v4.0.1 können Sie den Wert wie folgt festgelegt:

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>
Erweitern Sie das Snippet

— Mosh Feu
quelle
Wie kann ich den Wert einstellen, ohne das Änderungsereignis auszulösen? Das Änderungsereignis löst meine eigenen Ereignishandler aus, die vorgesehen sind, wenn der Benutzer den Wert manuell ändert.
— Enumag
Die andere Möglichkeit ist, destroydas Plugin erneut aufzurufen. Siehe den aktualisierten Code.
— Mosh Feu
Gibt es eine Möglichkeit, die Optionen, die ich ursprünglich an select2 übergeben habe, abzurufen, damit ich sie nicht duplizieren muss? Auf jeden Fall scheint diese Lösung eher ein Hack zu sein.
— Enumag
Sicher ist es hach. Der offizielle Weg gemäß den Dokumenten besteht darin, ein Änderungsereignis auszulösen. so that I wouldn't have to duplicate themWarum müssen sie dupliziert werden? Wenn Sie das tun destroydas selectist immer noch da mit allen seinen options.
— Mosh Feu
Ich meinte die Optionen an select2 übergeben:$example.select2({ ... this ... })
— enumag
6

Verwenden Sie für Ajax $(".select2").val("").trigger("change"). Das sollte das Problem lösen.

— Sab
quelle
6

Ich denke du brauchst die initSelectionFunktion

$("#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
quelle
Das funktioniert.
— Ist
5

In Select2 V.4

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

Ich denke es sollte funktionieren

— Akash Sharma
quelle
3

Stellen Sie den Wert ein und lösen Sie das Änderungsereignis sofort aus.

$('#selectteam').val([183,182]).trigger('change');
— Manoj Patel
quelle
Vielen Dank mein Tag
— Jaydeep Purohit
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Ich habe mein Problem mit diesem einfachen Code gelöst. Dabei ist #select_location_id eine ID des Auswahlfelds und value der Wert einer Option, die im Feld select2 aufgeführt ist.

— Numan Pathan
quelle
2

Die Antwort eines Phans hat bei mir funktioniert:

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

Das Hinzufügen der Änderung löst jedoch das Ereignis aus

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
quelle
1
Ich erhalte die Fehlermeldung "Ungefangener Typfehler: $ (...). Select2 (...). Änderung ist keine Funktion (...)", wenn ich dies auf diese Weise mache. Ich denke nicht, dass es mit Version 4.x von Select2 möglich ist - hier funktioniert nichts mit Ajax.
— MC9000
2

Sie können diesen Code verwenden:

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

Dabei sind 2 in "Nummer: 2" und 3 in "Nummer: 3" ID-Felder im Objektarray

— HamidReza
quelle
1

Manchmal select2()wird zuerst geladen, und das Steuerelement zeigt den zuvor ausgewählten Wert nicht korrekt an. Durch eine Verzögerung von einigen Sekunden kann dieses Problem behoben werden.

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

Es wäre besser, sich select2nach Auswahl einer der aktuellen Auswahl zu bewerben .

— Mehmet Ali Ulusan
quelle
0

Ich habe so etwas gemacht, um Elemente in der Dropdown-Liste select2 ajax voreinzustellen

      //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
quelle
0

Du solltest benutzen:

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 Klassik
quelle
0

Wenn Sie ein Eingabefeld verwenden, müssen Sie die Eigenschaft "multiple" mit ihrem Wert als "true" festlegen. Beispielsweise,

<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
quelle
0

In select2 < version4gibt es die Option initSelection()zum Remote-Laden von Daten, über die der Anfangswert für die Eingabe wie im Bearbeitungsmodus festgelegt werden kann.

$("#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
});

Quelldokumentation : Select2 - 3.5.3

— Sairam Suresh
quelle
0

Nur um noch jemandem etwas hinzuzufügen, der vielleicht das gleiche Problem mit mir hat.

Ich habe versucht, die ausgewählte Option meiner dynamisch geladenen Optionen (von AJAX) festzulegen, und ich habe versucht, eine der Optionen je nach Logik als ausgewählt festzulegen.

Mein Problem trat auf, weil ich nicht versucht habe, die ausgewählte Option basierend auf der ID festzulegen, die mit dem Wert übereinstimmen muss, nicht mit dem Wert, der mit dem Namen übereinstimmt!

— Tal
quelle
0

Für mehrere Werte wie folgt:

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

was zu so etwas führen wird

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

Dies kann jemandem helfen, select2-Daten aus AJAX zu laden, während Daten zur Bearbeitung geladen werden ( gilt für Einzel- oder Mehrfachauswahl ):

Während des Ladens meines Formulars / Modells:

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

Rufen Sie an, um Daten für Select2 auszuwählen:

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

und wenn Sie Probleme mit der Codierung haben, können Sie dies je nach Anforderung ändern:

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

    }
— Kamran Ul Haq
quelle
0

Wenn Sie Ihre Werte von Ajax erhalten, bevor Sie anrufen 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
Erweitern Sie das Snippet

Bestätigen Sie mit der jquery-Funktion, wenn der Ajax-Aufruf abgeschlossen ist

$.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.
    });
Erweitern Sie das Snippet
wie hier beschrieben [ Warten Sie, bis alle jQuery Ajax-Anforderungen abgeschlossen sind?

— Sieger Mwangi
quelle
0

Auf der Antwort von @ tomloprod aufbauen. Durch die ungerade Wahrscheinlichkeit, dass Sie x-editierbar verwenden und ein select2 (v4) -Feld sowie mehrere Elemente haben, die Sie vorab auswählen müssen. Sie können den folgenden Code verwenden:

$("#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');
     });
});

und hier ist es in Aktion:

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>
Erweitern Sie das Snippet

Ich denke, dass dies auch dann funktionieren würde, wenn Sie x-editable nicht verwenden. Ich hoffe, dass dies jemandem helfen konnte.

— Renier
quelle
0

Sie können diesen Code verwenden:

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

Geben Sie Ihren gewünschten Wert anstelle von Your_value ein

Hoffe es wird funktionieren :)

— Lösungsgeist
quelle
-2

Schön und einfach:

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

Und du veränderst dich id_city zur ID Ihrer Auswahl.

Edit: Nach Glen's Kommentar wird mir klar, dass ich erklären sollte, warum und wie es bei mir funktioniert hat:

Ich hatte es select2mir sehr gut gemacht, für meine Form zu arbeiten. Das einzige, was ich nicht zum Laufen bringen konnte, war, den aktuell ausgewählten Wert beim Bearbeiten anzuzeigen. Es wurde eine Drittanbieter-API durchsucht, neue gespeichert und alte Datensätze bearbeitet. Nach einer Weile wurde mir klar, dass ich den Wert nicht richtig einstellen musste, sondern nur die Beschriftung im Feld, denn wenn der Benutzer das Feld nicht ändert, passiert nichts. Nachdem ich viele Leute gesucht und gesucht hatte, die Probleme damit hatten, entschied ich mich, es mit reinem Javascript zu machen. Es hat funktioniert und ich habe gepostet, um vielleicht jemandem zu helfen. Ich schlage auch vor, einen Timer dafür einzustellen.

— Bonafernando
quelle
Diese Antwort ist ein schrecklicher Hack, der den Wert nicht einmal richtig einstellen würde.
— Glen
Das tut mir leid. Ich werde meine Antwort bearbeiten, um zu erklären, warum ich sie gepostet habe.
— Bonafernando
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.