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.


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


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

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


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


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.


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.


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

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>


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

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.



5

W Select2 V.4

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

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



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.


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

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


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

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

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


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

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

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>

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


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!


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

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

    }

0

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

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

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.
    }); 
jak opisano tutaj [ Czekaj, aż wszystkie żądania jQuery Ajax zostaną wykonane?


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>

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


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


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


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.