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.

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

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

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

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.

$("#btn").click(function() {
  $('#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
});

$("#sel").select2({
  ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function(params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function(data, params) {
      // 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, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  escapeMarkup: function(markup) {
    return markup;
  }, // let our custom formatter work
  minimumInputLength: 1,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">

<select id="sel" multiple="multiple" class="col-xs-5">
</select>

<button id="btn">Set Default</button>

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.

Mir hat das gefallen-

$("#drpServices").select2().val("0").trigger("change");

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>

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

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

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

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

In Select2 V.4

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

Ich denke es sollte funktionieren

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

$('#selectteam').val([183,182]).trigger('change');

    $("#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.

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

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

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

$('#inputID').val("100").select2();

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

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

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

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>

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

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!

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

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

    }

Wenn Sie Ihre Werte von Ajax erhalten, bevor Sie anrufen

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

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

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>

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

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 :)

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.