Bagaimana cara mengatur nilai yang dipilih dari jquery select2?

100

Ini milik kode sebelum select2 versi 4

Saya memiliki kode sederhana select2yang mendapatkan data dari 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; }
});

Kode ini berfungsi, namun, saya perlu menetapkan nilainya seolah-olah dalam mode edit. Ketika pengguna memilih nilai pertama kali, itu akan disimpan dan ketika dia perlu mengedit nilai itu harus muncul di menu pilih yang sama ( select2) untuk memilih nilai yang dipilih sebelumnya tetapi saya tidak dapat menemukan cara.

MEMPERBARUI:

Kode HTML:

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

Akses terprogram Select2 tidak bekerja dengan ini.

javascript  php  jquery  ajax  jquery-select2 
— ClearBoth
sumber
Anda harus dapat mengatur nilai yang dipilih di html atau gunakan$("#programid").val()
— Explosion Pills
@ExplosionPills Negative, saya mencobanya juga, saya mendapat nilai kosong. Bagaimana saya harus menggunakan programid.val ()? Saya mendapat nilai dari server maka saya harus mengaturnya ke bidang tersembunyi dari select2 ini.
— ClearBoth
@ClearBoth Tidak yakin apakah saya mengerti maksud Anda. Apakah Anda mencoba untuk menyetel nilai "dipilih" dari komponen Select2 ke salah satu hasil yang diambil AJAX?
— An Phan
@AnPhan Ya, apakah ada cara untuk melakukan itu?
— ClearBoth
@ClearBoth Ada. Cek jawaban saya di bawah ini.
— An Phan

Jawaban:

62

Untuk secara dinamis menyetel nilai "terpilih" dari komponen Select2:

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

Dimana parameter kedua adalah obyek dengan nilai yang diharapkan.

MEMPERBARUI:

Ini berhasil, hanya ingin dicatat bahwa di select2 baru, "a_key" adalah "teks" dalam objek select2 standar. begitu:{id: 100, text: 'Lorem Ipsum'}

Contoh: 

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

Terima kasih kepada @NoobishPro

— An Phan
sumber
1
Saya mencoba dengan id hanya select2 ('val', '1') tetapi tidak berhasil .. Terima kasih
— ClearBoth
6
Ini berhasil, hanya ingin dicatat bahwa di select2 baru, "a_key" adalah "teks" dalam objek select2 standar. jadi: {id: 100, teks: 'Lorem Ipsum'}
— NoobishPro
2
sama di sini di v4. Telah menarik rambutku untuk yang satu ini. Saya tidak berpikir itu mungkin tanpa solusi JavaScript. Mencari dropdown jQuery / Bootstrap Select2 lain sekarang (2 hari mengutak-atik setiap metode yang mungkin - tidak menyenangkan!)
— MC9000
29
Select2 v4: $('#inputID').val(100).trigger('change') Lihat select2.github.io/…
— Paul
@NoobishPro & An Phan - Terima kasih atas Jawaban & Komentarnya
— Sinto
105

SELECT2 <V4

Langkah # 1: HTML

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

Langkah # 2: Buat instance 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;
      }
});

Langkah # 3: Tetapkan nilai yang Anda inginkan

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

Jika Anda menggunakan select2 tanpa AJAX, Anda dapat melakukan hal berikut:

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

Anda juga dapat melakukannya:

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

SELECT2 V4

Untuk select2 v4 Anda dapat menambahkan langsung opsi sebagai berikut:

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

Atau dengan JQuery:

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

contoh lainnya

$("#myMultipleSelect2").val(5).trigger('change');
— tomloprod.dll
sumber
3
pemicu ('perubahan'); adalah bagian penting
— mihkov
$ ("# mySelect2"). select2 ("val", "0") - ini akan memicu peristiwa perubahan nilai jquery. Bagaimana mencegah hal ini terjadi. Biasanya ketika pengguna mengirimkan formulir, setelah selesai, saya mereset semua data formulir. Reset tidak akan mereset pilih2. Menggunakan select2 ("val", "0") akan memicu perubahan yang gila karena tidak ada tindakan dari pengguna.
— pelompat rbk
— Ryan
Dipuji untuk .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.dll

— Ahmad Tarawneh
sumber
2
bagaimana mengatur dengan teks daripada val
— Rizwan Patel
Pertanyaannya adalah bagaimana melakukan ini setelah memuat dengan panggilan AJAX. Jawaban ini tidak berfungsi dalam kasus ini.
— MC9000
ini akan memicu perubahan nilai select2 yang akan menjadi aneh jika Anda memiliki acara ini untuk diproses, dan dipicu tanpa pengguna melakukannya
— jumper rbk
17

Juga seperti yang saya coba, ketika menggunakan ajax di select2, metode kontrol programatik untuk menetapkan nilai baru di select2 tidak berfungsi untuk saya! Sekarang saya menulis kode ini untuk menyelesaikan masalah:

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

Anda dapat menguji kode sampel lengkap di sini tautan: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
Dalam kode sampel ini ada ajax select2 dan Anda dapat mengatur nilai baru dengan tombol.

Tampilkan cuplikan kode

— Nabi KAZ
sumber
Saya menggunakan displayKey dan semacamnya yang berbeda (meskipun itu ide yang buruk) - ini membantu tes penerimaan saya dengan Codeception dengan sempurna
— MonkeyMonkey
2
Membosankan, pastinya, tapi, seperti semua orang mengetahui Select2 v4 sama sekali tidak memiliki cara untuk melakukan sesuatu yang sangat sederhana seperti mengatur pilihan default
— MC9000
Saya menemukan jawaban ini menjadi satu-satunya cara untuk membuat select2 v4 - ajax select.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

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

Coba tambahkan ini lalu pilih. Tidak menduplikasi opsi pada panggilan AJAX.

— Jigz
sumber
var $ option = $ ("<option selected> </option>") .val ('1'). text ("Pilih saya"); $ ('# select_id'). append ($ option) .trigger ('change');
— Jigz
Terima kasih. dikonfirmasi bekerja pada versi 4.0.0 (panggilan ajax)
— khalil
Keberhasilan lain yang dikonfirmasi pada versi 4 dengan ajax.
— kode
Jika Anda menggunakan kotak yang dapat dicari dengan ajax, ini adalah solusi yang tepat. Yang ini berhasil untuk saya Juni 2019.
— Eric Skiff
12

Saya suka ini-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
sumber
2
Harap berikan beberapa penjelasan untuk membantu pengguna memahami cara kerja kode Anda dan untuk menjawab pertanyaan OP.
— Ivan
@Ivan, saya melakukan seperti ini $ ("# drpServices"). Val ("0"); yang tidak akan memilih pajak di dropdown select2, untuk mempengaruhi nilai dan teks kita perlu memicu perubahan fungsi select2. Ini bekerja dengan sempurna untuk saya. Saya harap pengguna akan mengerti.
— Ashi
9

Di versi saat ini di select2- v4.0.1 Anda dapat menyetel nilainya seperti ini:

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

— Mosh Feu
sumber
Bagaimana cara mengatur nilai tanpa memicu peristiwa perubahan? Peristiwa perubahan memicu penangan peristiwa saya sendiri yang dimaksudkan untuk saat pengguna mengubah nilai secara manual.
— enumag
Pilihan lainnya adalah destroymemanggil ulang plugin lagi .. Lihat kode yang diperbarui ..
— Mosh Feu
Apakah ada cara untuk mendapatkan opsi yang semula saya berikan ke select2 sehingga saya tidak perlu menduplikasi mereka? Bagaimanapun, solusi ini sepertinya lebih seperti peretasan.
— enumag
Yakin itu hach. Cara resmi menurut dokumen adalah dengan memicu peristiwa perubahan. so that I wouldn't have to duplicate themMengapa harus menduplikasi mereka? Ketika Anda melakukan destroyyang selectmasih ada dengan semua nya options.
— Mosh Feu
Maksud saya, opsi diteruskan ke select2:$example.select2({ ... this ... })
— enumag
6

Untuk Ajax, gunakan $(".select2").val("").trigger("change"). Itu seharusnya menyelesaikan masalah.

— Sab
sumber
6

Saya pikir Anda membutuhkan initSelectionfungsinya

$("#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
sumber
Ini bekerja. Tapi sudah usang pada versi 4.0
— VisualBean
5

Di Select2 V.4

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

Saya pikir itu harus berhasil

— Akash sharma
sumber
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Saya memecahkan masalah saya dengan kode sederhana ini. Di mana #select_location_id adalah ID dari kotak pilih dan nilai adalah nilai opsi yang terdaftar di kotak pilih2.

— Numan Pathan
sumber
2

Jawaban An Phan berhasil untuk saya:

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

Tetapi menambahkan perubahan memicu peristiwa tersebut

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
sumber
1
Saya mendapatkan error "Uncaught TypeError: $ (...). Select2 (...). Change is not a function (…)" saat melakukannya dengan cara ini. Saya tidak berpikir itu mungkin dengan versi 4.x dari Select2 - tidak ada di sini yang berfungsi dengan ajax.
— MC9000
2

Anda dapat menggunakan kode ini:

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

dimana 2 dalam "angka: 2" dan 3 dalam "angka: 3" adalah bidang id dalam larik objek

— HamidReza
sumber
1

Terkadang, select2()akan memuat terlebih dahulu, dan itu membuat kontrol tidak menunjukkan nilai yang dipilih sebelumnya dengan benar. Menunda beberapa detik dapat mengatasi masalah ini.

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

Akan lebih tepat untuk melamar select2setelah memilih salah satu pilihan saat ini.

— Mehmet Ali Ulusan
sumber
0

Saya melakukan sesuatu seperti ini untuk mengatur elemen di dropdown select2 ajax

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

Kamu harus menggunakan:

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

Jika Anda menggunakan kotak Input, Anda harus menyetel properti "multiple" dengan nilainya sebagai "true". Sebagai contoh,

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

Di select2 < version4sana ada opsi initSelection()untuk memuat data jarak jauh, yang melaluinya dimungkinkan untuk mengatur nilai awal untuk input seperti dalam mode edit.

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

Dokumentasi Sumber: Select2 - 3.5.3

— Sairam Suresh
sumber
0

Hanya untuk menambahkan kepada orang lain yang mungkin memiliki masalah yang sama dengan saya.

Saya mencoba untuk mengatur opsi yang dipilih dari opsi saya yang dimuat secara dinamis (dari AJAX) dan mencoba untuk mengatur salah satu opsi sebagai yang dipilih tergantung pada beberapa logika.

Masalah saya muncul karena saya tidak mencoba mengatur opsi yang dipilih berdasarkan ID yang harus sesuai dengan nilainya, bukan nilai yang cocok dengan nama!

— Lembah kecil
sumber
0

Untuk beberapa nilai seperti ini:

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

yang akan diterjemahkan menjadi sesuatu seperti ini

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

Ini dapat membantu seseorang memuat data select2 dari AJAX saat memuat data untuk diedit ( berlaku untuk pilihan tunggal atau multi ):

Selama pemuatan formulir / model saya:

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

Panggilan untuk memilih data untuk 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
                    }
                });
            });
        }
    }

dan jika Anda mungkin mengalami masalah dengan pengkodean, Anda dapat mengubah sebagai kebutuhan Anda:

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

    }
— Kamran Ul Haq
sumber
0

jika Anda mendapatkan nilai Anda dari ajax, sebelum menelepon 

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

konfirmasikan bahwa panggilan ajax telah selesai, menggunakan fungsi jquery when

$.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.
    });
Luaskan cuplikan
seperti yang dijelaskan di sini [ Tunggu sampai semua permintaan jQuery Ajax selesai?

— victor mwangi
sumber
0

Untuk membangun di atas jawaban @ tomloprod. Secara kebetulan Anda menggunakan x-editable , dan memiliki kolom select2 (v4) dan memiliki beberapa item yang perlu Anda pilih sebelumnya. Anda dapat menggunakan potongan kode berikut:

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

dan ini dia beraksi:

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

Saya rasa ini akan berhasil bahkan jika Anda tidak menggunakan x-editable. Saya berharap htis dapat membantu seseorang.

— Renier
sumber
0

Anda dapat menggunakan kode ini:

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

Masukkan nilai yang Anda inginkan, bukan Nilai_Anda

Semoga Ini akan berhasil :)

— Spirit Solusi
sumber
-2

Baik dan mudah:

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

Dan Anda mengubah id_cityke id pilihan Anda.

Sunting: Setelah komentar Glen, saya menyadari bahwa saya harus menjelaskan mengapa dan bagaimana itu bekerja untuk saya:

Saya telah membuat select2pekerjaan sangat bagus untuk bentuk saya. Satu-satunya hal yang tidak dapat saya lakukan adalah menunjukkan nilai yang dipilih saat ini saat mengedit. Itu mencari API pihak ketiga, menyimpan catatan baru dan mengedit catatan lama. Setelah beberapa saat saya menyadari bahwa saya tidak perlu mengatur nilainya dengan benar, hanya label di dalam bidang, karena jika pengguna tidak mengubah bidang, tidak ada yang terjadi. Setelah mencari dan melihat banyak orang mengalami masalah dengan itu, saya memutuskan membuatnya dengan Javascript murni. Ini berhasil dan saya memposting untuk mungkin membantu seseorang. Saya juga menyarankan untuk mengatur pengatur waktu untuk itu.

— bonafernando
sumber
Jawaban ini adalah peretasan yang buruk yang bahkan tidak akan menetapkan nilainya dengan benar.
— Glen
Saya minta maaf atas hal tersebut. Saya akan mengedit jawaban saya untuk menjelaskan mengapa saya mempostingnya.
— bonafernando
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.