Jak ustawić wybraną wartość jQuery select2?

106

Należą do kodów wcześniejszych niż select2 w wersji 4

Mam prosty kod, select2który pobiera dane z 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; }
});

Ten kod działa, jednak muszę ustawić na nim wartość, jak w trybie edycji. Gdy użytkownik wybierze wartość po raz pierwszy, zostanie ona zapisana, a gdy będzie musiał edytować tę wartość, musi pojawić się w tym samym menu wyboru ( select2), aby wybrać wartość wcześniej wybraną, ale nie mogę znaleźć sposobu.

AKTUALIZACJA:

Kod HTML:

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

Dostęp programowy Select2 nie działa z tym.

javascript  php  jquery  ajax  jquery-select2 
— Oba czyste
źródło
Powinieneś być w stanie ustawić wybraną wartość w html lub użyć$("#programid").val()
— Explosion Pills.
@ExplosionPills Negative, próbowałem też, mam pustą wartość. Jak używać programid.val ()? Otrzymałem wartość z serwera, a następnie muszę ustawić ją w tym ukrytym polu select2.
— ClearBoth
@ClearBoth Nie jestem pewien, czy rozumiem, co masz na myśli. Czy próbujesz ustawić wartość „selected” składnika Select2 na jeden z wyników pobranych z AJAX?
— An Phan
@AnPhan Tak, czy jest na to sposób?
— ClearBoth
@ClearBoth There is. Sprawdź moją odpowiedź poniżej.
— An Phan

Odpowiedzi:

64

Aby dynamicznie ustawić „wybraną” wartość komponentu Select2:

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

Gdzie drugim parametrem jest obiekt o oczekiwanych wartościach.

AKTUALIZACJA:

To działa, chciałem tylko zauważyć, że w nowym select2, „a_key” to „text” w standardowym obiekcie select2. więc:{id: 100, text: 'Lorem Ipsum'}

Przykład: 

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

Dzięki @NoobishPro

— An Phan
źródło
1
Próbowałem z identyfikatorem tylko select2 ('val', '1'), ale to nie zadziałało. Dzięki
— ClearBoth
6
To działa, chciałem tylko zauważyć, że w nowym select2, „a_key” to „tekst” w standardowym obiekcie select2. więc: {id: 100, text: 'Lorem Ipsum'}
— NoobishPro,
2
to samo tutaj na v4. Wyrywam sobie włosy z tego. Myślę, że nie jest to możliwe bez korzystania z rozwiązań JavaScript. Szukam kolejnej listy rozwijanej jQuery / Bootstrap Select2 teraz (2 dni manipulowania każdą możliwą metodą - bez radości!)
— MC9000
30
Select2 v4: $('#inputID').val(100).trigger('change') Zobacz select2.github.io/…
— Paul,
@NoobishPro & An Phan - Dzięki za odpowiedź i komentarz
— Sinto
114

SELECT2 <V4

Krok 1: HTML

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

Krok # 2: Utwórz instancję 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;
      }
});

Krok # 3: Ustaw żądaną wartość

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

Jeśli używasz select2 bez AJAX , możesz wykonać następujące czynności:

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

Możesz też to zrobić:

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

SELECT2 V4

W przypadku select2 v4 możesz dodać bezpośrednio opcje w następujący sposób:

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

Lub z JQuery:

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

inny przykład

$("#myMultipleSelect2").val(5).trigger('change');
— tomloprod
źródło
3
wyzwalacz („zmiana”); jest ważna część
— mihkov
$ ("# mySelect2"). select2 ("val", "0") - to wywoła zdarzenie jquery zmiany wartości. Jak temu zapobiec. Zwykle, gdy użytkownik przesyła formularz, po zakończeniu resetuję wszystkie dane formularza. Reset nie spowoduje zresetowania select2. Użycie select2 ("val", "0") spowoduje zmiany, co jest szalone, ponieważ użytkownik nie podejmuje żadnych działań.
— skoczek rbk
— Ryan
Pochwalony za .trigger („zmiana”)
— JP Dolocanog
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

— Ahmad Tarawneh
źródło
2
jak ustawić przez tekst zamiast val
— Rizwan Patel
Pytanie brzmiało, jak to zrobić po załadowaniu z wywołaniem AJAX. Ta odpowiedź nie działa w tym przypadku.
— MC9000,
spowoduje to zmianę wartości select2, co będzie dziwne, jeśli masz to zdarzenie do przetworzenia, i zostanie uruchomione bez wykonywania tego przez użytkownika
— jumper rbk
18

Również, jak próbowałem, kiedy używam ajax w select2, programowe metody kontroli ustawiania nowych wartości w select2 nie działają dla mnie! Teraz piszę ten kod, aby rozwiązać problem:

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

Możesz przetestować kompletny przykładowy kod w linku: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
W tym przykładowym kodzie znajduje się ajax select2 i możesz ustawić nową wartość za pomocą przycisku.

Pokaż fragment kodu

— Nabi KAZ
źródło
Używam różnych displayKey i innych rzeczy (chociaż był to zły pomysł) - to doskonale pomaga w moich testach akceptacyjnych z Codeception
— MonkeyMonkey
2
Na pewno żmudne, ale tak jak wszyscy się dowiadują, Select2 v4 po prostu nie ma możliwości zrobienia czegoś tak absurdalnie prostego, jak ustawienie domyślnego wyboru
— MC9000
Uważam, że ta odpowiedź jest jedynym sposobem na dokonanie select2 v4 - ajax select.
13 
var $option = $("<option selected></option>").val('1').text("Pick me");

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

Spróbuj dołączyć, a następnie wybierz. Nie powiela opcji po wywołaniu AJAX.

— Jigz
źródło
var $ opcja = $ ("<wybrana opcja> </option>") .val ('1'). text ("Wybierz mnie"); $ ('# select_id'). append ($ option) .trigger ('change');
— Jigz,
dzięki. potwierdzone prace nad wersją 4.0.0 (połączenie
— AJAX
Kolejny potwierdzony sukces w wersji 4 z ajaxem.
— programista
Jeśli używasz przeszukiwalnego pola z AJAX, jest to właściwe rozwiązanie. Ten pracował dla mnie w czerwcu 2019 r.
— Eric Skiff
12

Podobało mi się to-

$("#drpServices").select2().val("0").trigger("change");
— Ashi
źródło
2
Proszę podać wyjaśnienie, aby pomóc użytkownikom zrozumieć, jak działa Twój kod i odpowiedzieć na pytanie OP.
— Ivan
@Ivan, robiłem to w ten sposób $ ("# drpServices"). Val ("0"); która nie wybierze podatku w menu select2, aby wpłynąć zarówno na wartość, jak i tekst, potrzebujemy funkcji zmiany wyzwalacza select2. To działa idealnie dla mnie. Mam nadzieję, że użytkownicy zrozumieją.
— Ashi
9

W obecnej wersji on select2- v4.0.1 możesz ustawić taką wartość:

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>
Rozwiń fragment

— Mosh Feu
źródło
Jak ustawić wartość bez wyzwalania zdarzenia zmiany? Zdarzenie change wyzwala moje własne programy obsługi zdarzeń, które są przeznaczone do ręcznej zmiany wartości przez użytkownika.
— enumag
Inną opcją jest destroyponowne wywołanie wtyczki i ponowne wywołanie wtyczki. Zobacz zaktualizowany kod ..
— Mosh Feu
Czy istnieje sposób, aby uzyskać opcje, które pierwotnie przekazałem do select2, aby nie musieć ich kopiować? W każdym razie to rozwiązanie wydaje się bardziej hackem.
— enumag
Jasne, że to hach. Oficjalnym sposobem według dokumentacji jest wywołanie zdarzenia zmiany. so that I wouldn't have to duplicate themDlaczego trzeba je powielać? Kiedy robisz wciąż tam ze wszystkimi jego . destroyselectoptions
— Mosh Feu
Miałem na myśli opcje przekazane do select2:$example.select2({ ... this ... })
— enumag
7

Myślę, że potrzebujesz tej initSelectionfunkcji

$("#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
źródło
To działa. Ale jest przestarzały od wersji 4.0
— VisualBean
6

W przypadku Ajax użyj $(".select2").val("").trigger("change"). To powinno rozwiązać problem.

— Sab
źródło
5

W Select2 V.4

posługiwać się $('selector').select2().val(value_to_select).trigger('change');

Myślę, że to powinno działać

— Akash sharma
źródło
3 
    $("#select_location_id").val(value);
    $("#select_location_id").select2().trigger('change');

Rozwiązałem swój problem tym prostym kodem. Gdzie #select_location_id to identyfikator pola wyboru, a wartość to wartość opcji wymienionej w polu select2.

— Numan Pathan
źródło
2

Odpowiedź Phana zadziałała dla mnie:

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

Ale dodanie zmiany wyzwala zdarzenie

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
— Andres Rodriguez
źródło
1
Gdy robię to w ten sposób, pojawia się błąd "Uncaught TypeError: $ (...). Select2 (...). Zmiana nie jest funkcją (…)". Nie sądzę, żeby było to możliwe z wersją 4.x Select2 - nic tutaj nie działa z ajaxem.
— MC9000
2

możesz użyć tego kodu:

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

gdzie 2 w „number: 2” i 3 w „number: 3” to pole id w tablicy obiektów

— HamidReza
źródło
1

Czasami select2()będzie ładowany jako pierwszy, co powoduje, że formant nie wyświetla poprawnie wcześniej wybranej wartości. Wprowadzenie opóźnienia na kilka sekund może rozwiązać ten problem.

setTimeout(function(){                  
    $('#costcentreid').select2();               
},3000);
— Poornima
źródło
1 
$('#inputID').val("100").select2();

Bardziej odpowiednie byłoby zastosowanie select2po wybraniu jednego z obecnie wybranych.

— Mehmet Ali Ulusan
źródło
0

Zrobiłem coś takiego, aby ustawić elementy w menu rozwijanym 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
źródło
0

Powinieneś użyć:

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 Classical
źródło
0

Jeśli używasz pola wprowadzania, musisz ustawić właściwość „wiele” z jej wartością jako „prawda”. Na przykład,

<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
źródło
0

W select2 < version4istnieje możliwość initSelection()zdalnego ładowania danych, dzięki której możliwe jest ustawienie wartości początkowej dla wejścia jak w trybie edycji.

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

Dokumentacja źródłowa: Select2 - 3.5.3

— Sairam Suresh
źródło
0

Chcę tylko dodać do każdego, kto mógł mieć ten sam problem ze mną.

Próbowałem ustawić wybraną opcję moich dynamicznie ładowanych opcji (z AJAX) i próbowałem ustawić jedną z opcji jako wybraną w zależności od jakiejś logiki.

Mój problem pojawił się, ponieważ nie próbowałem ustawić wybranej opcji na podstawie identyfikatora, który musi pasować do wartości, a nie wartości pasującej do nazwy!

— Dolina górska
źródło
0

Dla wielu wartości coś takiego:

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

co przełoży się na coś takiego

$("#HouseIds").select2("val", [35293,49525]);
— Robert Benyi
źródło
0

Może to pomóc komuś w ładowaniu danych select2 z AJAX podczas ładowania danych do edycji ( dotyczy wyboru pojedynczego lub wielokrotnego ):

Podczas ładowania mojego formularza / modelu:

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

Zadzwoń, aby wybrać dane dla 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
                    }
                });
            });
        }
    }

a jeśli masz problemy z kodowaniem, możesz zmienić swoje wymaganie:

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

    }
— Kamran Ul Haq
źródło
0

jeśli pobierasz wartości z AJAX, przed wywołaniem 

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

potwierdź, że wywołanie ajax zostało zakończone, używając funkcji 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.
    });
Rozwiń fragment
jak opisano tutaj [ Czekaj, aż wszystkie żądania jQuery Ajax zostaną wykonane?

— victor mwangi
źródło
0

Aby zbudować na podstawie odpowiedzi @ tomloprod. Dziwna szansa, że ​​używasz x-editable i masz pole select2 (v4) i masz wiele elementów, które musisz wstępnie wybrać. Możesz użyć następującego fragmentu kodu:

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

i tutaj jest w akcji:

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>
Rozwiń fragment

Myślę, że to zadziała, nawet jeśli nie używasz x-editable. Mam nadzieję, że to mogłoby komuś pomóc.

— Renier
źródło
0

Możesz użyć tego kodu:

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

Wpisz żądaną wartość zamiast Your_value

Mam nadzieję, że to zadziała :)

— Duch Rozwiązań
źródło
-3

Miło i łatwo:

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

I zmieniasz id_cityna identyfikator wybranego przez siebie.

Edycja: Po komentarzu Glena zdaję sobie sprawę, że powinienem wyjaśnić, dlaczego i jak to zadziałało:

Zrobiłem select2pracuje bardzo miłe dla mojej postaci. Jedyną rzeczą, której nie mogłem wykonać, było pokazanie aktualnie wybranej wartości podczas edycji. Przeszukiwał zewnętrzny interfejs API, zapisywał nowe i edytował stare rekordy. Po chwili zdałem sobie sprawę, że nie muszę poprawnie ustawiać wartości, tylko etykietę wewnątrz pola, ponieważ jeśli użytkownik nie zmieni pola, nic się nie dzieje. Po przeszukaniu i przyjrzeniu się wielu osobom mającym z tym problemy, zdecydowałem się zrobić to za pomocą czystego Javascript. Zadziałało i wysłałem, żeby komuś pomóc. Proponuję też ustawić na to timer.

— bonafernando
źródło
Ta odpowiedź to okropny hack, który nawet nie ustawiłby poprawnie wartości.
— Glen,
Przykro mi z tego powodu. Zmienię odpowiedź, aby wyjaśnić, dlaczego ją opublikowałem.
— bonafernando
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.