Należą do kodów wcześniejszych niż select2 w wersji 4
Mam prosty kod, select2
któ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
źródło
$("#programid").val()
Odpowiedzi:
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
źródło
$('#inputID').val(100).trigger('change')
Zobacz select2.github.io/…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");
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');
źródło
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
źródło
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
$("#btn").click(function() { $('#sel') .empty() //empty select .append($("<option/>") //add option tag in select .val("20") //set value for option to post it .text("nabi")) //set a text for show in select .val("20") //select option of select2 .trigger("change"); //apply to select2 }); $("#sel").select2({ ajax: { url: "https://api.github.com/search/repositories", dataType: 'json', delay: 250, data: function(params) { return { q: params.term, // search term page: params.page }; }, processResults: function(data, params) { // parse the results into the format expected by Select2 // since we are using custom formatting functions we do not need to // alter the remote JSON data, except to indicate that infinite // scrolling can be used params.page = params.page || 1; return { results: data.items, pagination: { more: (params.page * 30) < data.total_count } }; }, cache: true }, escapeMarkup: function(markup) { return markup; }, // let our custom formatter work minimumInputLength: 1, templateResult: formatRepo, // omitted for brevity, see the source of this page templateSelection: formatRepoSelection // omitted for brevity, see the source of this page }); function formatRepo(repo) { if (repo.loading) return repo.text; var markup = "<div class='select2-result-repository clearfix'>" + "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + "<div class='select2-result-repository__meta'>" + "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; if (repo.description) { markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; } markup += "<div class='select2-result-repository__statistics'>" + "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" + "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" + "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" + "</div>" + "</div></div>"; return markup; } function formatRepoSelection(repo) { return repo.full_name || repo.text; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css"> <select id="sel" multiple="multiple" class="col-xs-5"> </select> <button id="btn">Set Default</button>
źródło
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.
źródło
Podobało mi się to-
$("#drpServices").select2().val("0").trigger("change");
źródło
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>
źródło
destroy
ponowne wywołanie wtyczki i ponowne wywołanie wtyczki. Zobacz zaktualizowany kod ..so that I wouldn't have to duplicate them
Dlaczego trzeba je powielać? Kiedy robisz wciąż tam ze wszystkimi jego .destroy
select
options
$example.select2({ ... this ... })
Myślę, że potrzebujesz tej
initSelection
funkcji$("#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; } });
źródło
W przypadku Ajax użyj
$(".select2").val("").trigger("change")
. To powinno rozwiązać problem.źródło
HTML
<select id="lang" > <option value="php">php</option> <option value="asp">asp</option> <option value="java">java</option> </select>
JS
$("#lang").select2().val('php').trigger('change.select2');
źródło: https://select2.github.io/options.html
źródło
W Select2 V.4
posługiwać się
$('selector').select2().val(value_to_select).trigger('change');
Myślę, że to powinno działać
źródło
Ustaw wartość i natychmiast wywołaj zdarzenie zmiany.
$('#selectteam').val([183,182]).trigger('change');
źródło
$("#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.
źródło
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();
źródło
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
źródło
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);
źródło
$('#inputID').val("100").select2();
Bardziej odpowiednie byłoby zastosowanie
select2
po wybraniu jednego z obecnie wybranych.źródło
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
źródło
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 });
źródło
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>
źródło
W
select2 < version4
istnieje 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
źródło
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!
źródło
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]);
źródło
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,""); }
źródło
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. });
źródło
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.
źródło
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 :)
źródło
Miło i łatwo:
document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";
I zmieniasz
id_city
na identyfikator wybranego przez siebie.Edycja: Po komentarzu Glena zdaję sobie sprawę, że powinienem wyjaśnić, dlaczego i jak to zadziałało:
Zrobiłem
select2
pracuje 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.źródło