Jquery select2'nin seçilen değeri nasıl ayarlanır?

106

Bu, select2 sürüm 4'ten önceki kodlara aittir

select2Ajax'tan veri almak için basit bir kodum var

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

Bu kod çalışıyor ancak sanki düzenleme modundaymış gibi üzerinde bir değer ayarlamam gerekiyor. Kullanıcı ilk kez bir değer seçtiğinde, kaydedilecek ve bu değeri düzenlemesi gerektiğinde select2, daha önce seçilen değeri seçmek için aynı seçim menüsünde ( ) görünmesi gerekir, ancak bir yol bulamıyorum.

GÜNCELLEME:

HTML kodu:

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

Select2 programlı erişim bununla çalışmaz.

javascript  php  jquery  ajax  jquery-select2 
— İkisini de temizle
kaynak
Sadece html'de seçilen değeri ayarlayabilmeli veya$("#programid").val()
— Explosion Pills
@ExplosionPills Negative, bunu da denedim, boş bir değer aldım. Programid.val () nasıl kullanmalıyım? Değeri sunucudan aldım ve onu select2'nin bu gizli alanına ayarlamam gerekiyor.
— ClearBoth
@ClearBoth Ne demek istediğini anladığımdan emin değilim. Select2 bileşeninin "seçilmiş" değerini AJAX ile alınan sonuçlardan birine ayarlamaya mı çalışıyorsunuz?
— Bir Phan
@AnPhan Evet, bunu yapmanın bir yolu var mı?
— ClearBoth
@ClearBoth Var. Aşağıdaki cevabımı kontrol edin.
— Bir Phan

Yanıtlar:

64

Bir Select2 bileşeninin "seçilmiş" değerini dinamik olarak ayarlamak için:

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

İkinci parametrenin beklenen değerlere sahip bir nesne olduğu yer.

GÜNCELLEME:

Bu işe yarıyor, sadece yeni select2'de "a_key" nin standart bir select2 nesnesindeki "metin" olduğunu not etmek istedim . yani:{id: 100, text: 'Lorem Ipsum'}

Misal: 

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

@NoobishPro'ya teşekkürler

— Bir Phan
kaynak
1
Yalnızca select2 ('val', '1') kimliğiyle deniyordum ama işe yaramadı .. Teşekkürler
— ClearBoth
6
Bu işe yarıyor, sadece yeni select2'de "a_key" nin standart bir select2 nesnesindeki "metin" olduğunu not etmek istedim. yani: {id: 100, metin: 'Lorem Ipsum'}
— NoobishPro
2
v4'te de aynı. Bunun üzerine saçımı çekiyorum. JavaScript çözümlerine gitmeden bunun mümkün olduğunu sanmıyorum. Şimdi başka bir jQuery / Bootstrap Select2 açılır listesi aranıyor (2 gün boyunca akla gelebilecek her yöntemle
— uğraşmak
30
Select2 v4: Select2.github.io/…$('#inputID').val(100).trigger('change') bakın
— Paul
@NoobishPro & An Phan - Cevap ve Yorum için teşekkürler
— Sinto
114

SEÇ2 <V4

1. Adım: HTML

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

Adım # 2: Select2 örneğini oluşturun

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

Adım # 3: İstediğiniz değeri ayarlayın

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

AJAX olmadan select2 kullanırsanız, şunları yapabilirsiniz:

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

Bunu da yapabilirsiniz:

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

SELECT2 V4

İçin v4 2'yi Seç doğrudan bir seçenek ekleyebilirsiniz / aşağıdaki gibidir s:

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

Veya JQuery ile:

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

diğer örnek

$("#myMultipleSelect2").val(5).trigger('change');
— tomloprod
kaynak
3
tetikleyici ('değiştir'); önemli kısım
— mihkov
$ ("# mySelect2"). select2 ("val", "0") - bu, değer değişikliklerinin jquery olayını tetikleyecektir. Bunun olmasını nasıl önleyebilirim? Genellikle kullanıcı formu gönderdiğinde, tamamlandıktan sonra tüm form verilerini sıfırlarım. Sıfırlama, select2'yi sıfırlamaz. Select2 ("val", "0") kullanılması, kullanıcının hiçbir eylemi olmadığı için çılgınca değişiklikleri tetikleyecektir.
— jumper rbk
— Ryan
— .Trigger
25

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

— Ahmed Teravne
kaynak
2
val yerine metinle nasıl ayarlanır
— Rizwan Patel
Soru AJAX çağrısıyla yükleme yaptıktan sonra bunun nasıl yapılacağıydı. Bu cevap bu durumda işe yaramaz.
— MC9000
bu, işlenecek bu olayı varsa ve kullanıcı yapmadan tetiklenecek olan select2 değer değişikliklerini tetikleyecektir
— jumper rbk
18

Ayrıca denediğim gibi, select2'de ajax kullandığınızda, select2'de yeni değerler ayarlamak için programlı kontrol yöntemleri benim için çalışmıyor! Şimdi sorunu çözmek için şu kodu yazıyorum:

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

Örnek kodun tamamını şu bağlantıdan test edebilirsiniz: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
Bu örnek kodda bir ajax select2 vardır ve bir düğme ile yeni bir değer ayarlayabilirsiniz.

Kod parçacığını göster

— Nabi KAZ
kaynak
Farklı displayKey ve benzeri şeyler kullanıyorum (yine de kötü bir fikirdi) - bu, Codeception ile kabul testlerime mükemmel bir şekilde yardımcı oluyor
— MonkeyMonkey
2
Elbette sıkıcı, ancak herkesin öğrendiği gibi Select2 v4, varsayılan bir seçim ayarlamak kadar gülünç derecede basit bir şey yapmanın bir yolu yok
— MC9000
Bu cevabı select2 v4 - ajax select yapmanın tek yolu olarak buldum.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

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

Bu eki deneyin ve ardından seçin. AJAX çağrısı üzerine seçeneği çoğaltmaz.

— Jigz
kaynak
var $ seçenek = $ ("<seçenek seçildi> </option>") .val ('1'). text ("Beni seç"); $ ('# select_id']. append ($ seçenek) .trigger ('değiştir');
— Jigz
Teşekkürler. 4.0.0 sürümünde onaylanan çalışmalar (ajax çağrısı)
— khalil
Ajax ile 4. versiyonda bir başka onaylanmış başarı.
— a coder
Ajax ile aranabilir bir kutu kullanıyorsanız, bu doğru çözümdür. Bu benim için çalıştı Haziran 2019.
— Eric Skiff
12

Bunu beğendim-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
kaynak
2
Kullanıcıların kodunuzun nasıl çalıştığını anlamalarına ve OP'nin sorusunu yanıtlamalarına yardımcı olmak için lütfen bazı açıklamalar sağlayın.
— Ivan
@Ivan, bunu yapıyordum $ ("# drpServices"). Val ("0"); Bu, select2 açılır menüsünde vergiyi seçmeyecek, hem değeri hem de metni etkilemek için select2'nin tetik değiştirme işlevine ihtiyacımız var. Bu benim için mükemmel çalışıyor. Umarım kullanıcılar anlayacaktır.
— Ashi
9

Mevcut sürümde select2- v4.0.1 değeri şu şekilde ayarlayabilirsiniz:

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>
Snippet'i genişlet

— Mosh Feu
kaynak
Değişim olayını tetiklemeden değeri nasıl ayarlayabilirim? Change olayı, kullanıcı değeri manuel olarak değiştirdiğinde kullanılan kendi olay işleyicilerimi tetikler.
— enumag
Diğer seçenek ise destroyeklentiyi tekrar çağırmaktır .. Güncellenen koda bakın ..
— Mosh Feu
Başlangıçta select2'ye geçirdiğim seçenekleri kopyalamanın bir yolu var mı? Her neyse, bu çözüm daha çok bir hack gibi görünüyor.
— enumag
Elbette hach. Dokümanlara göre resmi yol, değişim olayını tetiklemektir. so that I wouldn't have to duplicate themNeden onları kopyalamak zorundasın? Bunu yaptığınızda tüm onunkiyle hala orada . destroyselectoptions
— Mosh Feu
Seçim2'ye aktarılan seçenekleri kastetmiştim:$example.select2({ ... this ... })
— 2016
7

Sanırım initSelectionişleve ihtiyacın var

$("#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; }
});
— Ahmed Teravne
kaynak
Bu çalışıyor. Ancak 4.0 sürümünde kullanımdan kaldırılmıştır
— VisualBean
6

Ajax için kullanın $(".select2").val("").trigger("change"). Bu sorunu çözmek gerekir.

— Sab
kaynak
5

In Select2 V.4

kullanım $('selector').select2().val(value_to_select).trigger('change');

Bence çalışmalı

— Akash sharma
kaynak
3

Değeri ayarlayın ve değişiklik olayını hemen tetikleyin.

$('#selectteam').val([183,182]).trigger('change');
— Manoj patel
kaynak
Benim
— günümle
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Sorunumu bu basit kodla çözdüm. Burada #select_location_id, seçim kutusunun kimliğidir ve değer, select2 kutusunda listelenen bir seçeneğin değeridir.

— Numan Pathan
kaynak
2

Bir Phan'ın cevabı benim için çalıştı:

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

Ancak değişikliğin eklenmesi olayı tetikler

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
kaynak
1
Bu şekilde yaparken "Yakalanmamış TypeError: $ (...). Select2 (...). Değişiklik bir işlev değil (…)" hatasını alıyorum. Select2'nin 4.x sürümüyle bunun mümkün olduğunu sanmıyorum - buradaki hiçbir şey ajax ile çalışmıyor.
— MC9000
2

bu kodu kullanabilirsiniz:

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

burada "sayı: 2" deki 2 ve "sayı: 3" deki 3, nesne dizisindeki kimlik alanıdır

— HamidReza
kaynak
1

Bazen, select2()önce yüklenecek ve bu, kontrolün önceden seçilen değeri doğru göstermemesini sağlar. Birkaç saniye geciktirmek bu sorunu çözebilir.

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

select2Mevcut seçimlerden birini seçtikten sonra başvurmak daha uygun olacaktır .

— Mehmet Ali Ulusan
kaynak
0

Select2 ajax açılır menüsünde öğeleri önceden ayarlamak için böyle bir şey yaptım

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

Kullanmalısın:

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 Klasik
kaynak
0

Bir Giriş kutusu kullanıyorsanız, değeriyle birlikte "çoklu" özelliğini "doğru" olarak ayarlamalısınız. Örneğin,

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

Burada , düzenleme modunda olduğu gibi giriş için başlangıç ​​değerini ayarlamanın mümkün olduğu uzaktan veri yükleme select2 < version4seçeneği vardır initSelection().

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

Kaynak Belgeler: Select2 - 3.5.3

— Sairam Suresh
kaynak
0

Benimle aynı sorunu yaşayan herkesi eklemek için.

Dinamik olarak yüklenen seçeneklerimin (AJAX'tan) seçilen seçeneğini ayarlamaya ve bazı mantığa bağlı olarak seçeneklerden birini seçili olarak ayarlamaya çalışıyordum.

Sorunum, seçilen seçeneği, adla eşleşen değere değil, değerle eşleşmesi gereken kimliğe göre ayarlamaya çalışmadığım için geldi!

— Glen
kaynak
0

Birden çok değer için şuna benzer bir şey:

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

bunun gibi bir şeye çevirecek

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

Bu, düzenleme için veri yüklerken bir kişinin AJAX'tan select2 verilerini yüklemesine yardımcı olabilir ( tekli veya çoklu seçim için geçerlidir ):

Form / model yüklemem sırasında:

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

Select2 için veri seçmek üzere arayın:

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

ve kodlamayla ilgili sorun yaşıyorsanız, gereksiniminiz doğrultusunda değişiklik yapabilirsiniz:

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

    }
— Kamran Ul Haq
kaynak
0

Değerlerinizi ajax'tan alıyorsanız, aramadan önce 

$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
Snippet'i genişlet

jquery işlevini kullanarak ajax çağrısının tamamlandığını onaylayın.

$.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.
    });
Snippet'i genişlet
burada açıklandığı gibi [ Tüm jQuery Ajax istekleri tamamlanana kadar bekleyin?

— Victor Mwangi
kaynak
0

@ Tomloprod'un cevabının üzerine inşa etmek. X-editable kullanıyor olmanız ve bir select2 (v4) alanına sahip olmanız ve önceden seçmeniz gereken birden çok öğeye sahip olmanızın tuhaf bir şansı . Aşağıdaki kod parçasını kullanabilirsiniz:

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

ve işte burada:

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>
Snippet'i genişlet

X-editable kullanmasanız bile bunun işe yarayacağını tahmin ediyorum. Umarım htis birisine yardım edebilir.

— Renier
kaynak
0

Bu kodu kullanabilirsiniz:

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

Değeriniz yerine istediğiniz değeri koyun

Umarım işe yarar :)

— Çözüm Ruhu
kaynak
-3

Güzel ve kolay:

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

Ve seçiminizin id_citykimliğine geçersiniz.

Düzenleme: Glen'in yorumundan sonra benim için neden ve nasıl çalıştığını açıklamam gerektiğini anladım:

select2Formum için çalışmayı gerçekten güzel hale getirmiştim . Çalışamadığım tek şey, düzenleme sırasında mevcut seçili değeri göstermekti. Üçüncü taraf bir API arıyor, yeni kaydediyor ve eski kayıtları düzenliyordu. Bir süre sonra değeri doğru bir şekilde ayarlamam gerekmediğini fark ettim, sadece alanın içindeki etiketi çünkü kullanıcı alanı değiştirmezse hiçbir şey olmuyor. Sorun yaşayan birçok insanı aradıktan ve aradıktan sonra, saf Javascript ile yapmaya karar verdim. İşe yaradı ve belki birine yardım etmek için yazdım. Ayrıca bunun için bir zamanlayıcı ayarlamanızı öneririm.

— Bonafernando
kaynak
Bu cevap, değeri doğru bir şekilde ayarlayamayacak kadar korkunç bir hack.
— Glen
Bunun için üzgünüm. Cevabımı neden yayınladığımı açıklamak için düzenleyeceğim.
— bonafernando
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.