Điều này thuộc về các mã trước select2 phiên bản 4

Tôi có một mã đơn giản select2để lấy dữ liệu từ 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; }
});

Mã này đang hoạt động, tuy nhiên, tôi cần đặt một giá trị trên nó như thể ở chế độ chỉnh sửa. Khi người dùng chọn một giá trị lần đầu tiên, giá trị đó sẽ được lưu và khi anh ta cần chỉnh sửa giá trị đó, nó phải xuất hiện trong cùng menu chọn ( select2) để chọn giá trị đã chọn trước đó nhưng tôi không thể tìm ra cách.

CẬP NHẬT:

Mã HTML:

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

Quyền truy cập có lập trình Select2 không hoạt động với điều này.

Để đặt động giá trị "đã chọn" của thành phần Select2:

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

Trong đó tham số thứ hai là một đối tượng với các giá trị mong đợi.

CẬP NHẬT:

Điều này hoạt động, chỉ muốn lưu ý rằng trong select2 mới, "a_key" là "văn bản" trong đối tượng select2 tiêu chuẩn. vì thế:{id: 100, text: 'Lorem Ipsum'}

Thí dụ:

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

Cảm ơn @NoobishPro

SELECT2 <V4

Bước # 1: HTML

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

Bước # 2: Tạo một phiên bản của 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;
      }
});

Bước # 3: Đặt giá trị mong muốn của bạn

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

Nếu bạn sử dụng select2 mà không có AJAX, bạn có thể làm như sau:

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

Bạn cũng có thể làm như vậy:

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

SELECT2 V4

Đối với select2 v4, bạn có thể nối trực tiếp một / s tùy chọn như sau:

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

Hoặc với JQuery:

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

ví dụ khác

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

Cũng như tôi đã thử, khi sử dụng ajax trong select2, các phương pháp điều khiển lập trình để đặt giá trị mới trong select2 không hoạt động với tôi! Bây giờ tôi viết mã này để giải quyết vấn đề:

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

Bạn có thể kiểm tra mã mẫu hoàn chỉnh trong liên kết tại đây: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
Trong mã mẫu này có ajax select2 và bạn có thể đặt giá trị mới bằng một nút.

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

Hãy thử phần nối này rồi chọn. Không trùng lặp tùy chọn khi gọi AJAX.

Tôi đã làm như thế này-

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

Trong phiên bản hiện tại bật select2- v4.0.1 bạn có thể đặt giá trị như sau:

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>

Đối với Ajax, hãy sử dụng $(".select2").val("").trigger("change"). Điều đó sẽ giải quyết vấn đề.

Tôi nghĩ bạn cần initSelectionchức năng

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

nguồn: https://select2.github.io/options.html

Trong Select2 V.4

sử dụng $('selector').select2().val(value_to_select).trigger('change');

Tôi nghĩ rằng nó sẽ làm việc

Đặt giá trị và kích hoạt sự kiện thay đổi ngay lập tức.

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

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

Tôi đã giải quyết vấn đề của mình với mã đơn giản này. Trong đó #select_location_id là ID của hộp chọn và giá trị là giá trị của tùy chọn được liệt kê trong hộp select2.

Câu trả lời của An Phan phù hợp với tôi:

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

Nhưng việc thêm thay đổi sẽ kích hoạt sự kiện

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

bạn có thể sử dụng mã này:

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

trong đó 2 trong "number: 2" và 3 trong "number: 3" là trường id trong mảng đối tượng

Đôi khi, select2()sẽ được tải trước tiên và điều đó làm cho điều khiển không hiển thị chính xác giá trị đã chọn trước đó. Trì hoãn một vài giây có thể giải quyết vấn đề này.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);

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

Sẽ thích hợp hơn nếu áp dụng select2sau khi chọn một trong các lựa chọn hiện tại.

Tôi đã làm điều gì đó như thế này để đặt trước các phần tử trong menu thả xuống 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

Bạn nên sử dụng:

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

Nếu bạn đang sử dụng hộp Nhập, bạn phải đặt thuộc tính "nhiều" với giá trị của nó là "đúng". Ví dụ,

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

Trong select2 < version4đó có tùy chọn initSelection()để tải dữ liệu từ xa, qua đó có thể đặt giá trị ban đầu cho đầu vào như trong chế độ chỉnh sửa.

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

Tài liệu nguồn: Select2 - 3.5.3

Chỉ để thêm vào bất kỳ ai khác có thể đã đưa ra cùng vấn đề với tôi.

Tôi đang cố gắng đặt tùy chọn đã chọn trong số các tùy chọn được tải động của mình (từ AJAX) và đang cố gắng đặt một trong các tùy chọn như đã chọn tùy thuộc vào một số logic.

Vấn đề của tôi xảy ra vì tôi không cố gắng đặt tùy chọn đã chọn dựa trên ID cần khớp với giá trị, không phải giá trị khớp với tên!

Đối với nhiều giá trị như sau:

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

cái này sẽ dịch sang một cái gì đó như thế này

$("#HouseIds").select2("val", [35293,49525]);

Điều này có thể giúp ai đó tải dữ liệu select2 từ AJAX trong khi tải dữ liệu để chỉnh sửa ( áp dụng cho một hoặc nhiều lựa chọn ):

Trong quá trình tải biểu mẫu / mô hình của tôi:

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

Gọi để chọn dữ liệu cho 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
                    }
                });
            });
        }
    }

và nếu bạn có thể gặp vấn đề với mã hóa, bạn có thể thay đổi theo yêu cầu của mình:

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

    }

nếu bạn đang nhận các giá trị của mình từ ajax, trước khi gọi

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

xác nhận rằng lệnh gọi ajax đã hoàn tất, sử dụng hàm jquery khi

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

Để xây dựng câu trả lời của @ tomloprod. Rất có thể là bạn đang sử dụng x-editable và có trường select2 (v4) và có nhiều mục bạn cần chọn trước. Bạn có thể sử dụng đoạn mã sau:

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

và ở đây nó đang hoạt động:

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>

Tôi đoán rằng điều này sẽ hoạt động ngay cả khi bạn không sử dụng x-editable. Tôi hy vọng rằng htis có thể giúp một ai đó.

Bạn có thể sử dụng mã này:

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

Đặt giá trị mong muốn của bạn thay vì Your_value

Hy vọng nó sẽ hoạt động :)

Tốt đẹp và dễ dàng:

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

Và bạn thay đổi id_citythành id của lựa chọn của bạn.

Chỉnh sửa: Sau nhận xét của Glen, tôi nhận ra rằng tôi nên giải thích tại sao và cách nó hoạt động với tôi:

Tôi đã làm select2việc thực sự tốt cho hình thức của tôi. Điều duy nhất tôi không thể thực hiện là hiển thị giá trị đã chọn hiện tại khi chỉnh sửa. Nó đang tìm kiếm một API của bên thứ ba, lưu mới và chỉnh sửa các bản ghi cũ. Sau một thời gian, tôi nhận ra rằng tôi không cần đặt giá trị chính xác, chỉ có nhãn bên trong trường, bởi vì nếu người dùng không thay đổi trường, không có gì xảy ra. Sau khi tìm kiếm và tìm kiếm nhiều người gặp khó khăn với nó, tôi quyết định tạo nó bằng Javascript thuần túy. Nó hoạt động và tôi đã đăng để có thể giúp ai đó. Tôi cũng đề nghị đặt hẹn giờ cho nó.