Как установить выбранное значение jquery select2?
Это относится к кодам до select2 версии 4
У меня есть простой код select2
которые получают данные из 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; }
});
Этот код работает, однако мне нужно установить для него значение, как будто в режиме редактирования. Когда пользователь выбирает значение в первый раз, оно будет сохранено, а когда ему нужно отредактировать это значение, оно должно появиться в том же меню выбора (select2
), чтобы выбрать ранее выбранное значение, но я не могу найти способ.
ОБНОВИТЬ:
HTML-код:
<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">
Программный доступ Select2 не работает с этим.
36 ответов
[jsfiddle_link][1] <select id="lang" multiple >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("#lang").select2().select2('val',['asp','php']);
<!-- language: lang-html -->
[1]: https://jsfiddle.net/xrug7f6k/
После получения ответа на ваш запрос вы можете обновитьselect2
значение таким образом:
let response = JSON.parse(your_response);
let key_to_select = response.your_key;
$(document).find('yourIdorClass').val(key_to_select ).trigger("change");
Если вы получаете свои значения из ajax, перед вызовом
$("#select_location_id").val(value);
$("#select_location_id").select2().trigger('change');
подтвердите, что вызов ajax завершен, используя функцию jquery, когда
$.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.
});
Вы должны использовать:
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
});
Легко и приятно:
document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";
А ты меняешь id_city
на ваш идентификатор выбора.
Изменить: После комментария Глена я понимаю, что я должен объяснить, почему и как это работает для меня:
Я сделал select2
работать очень хорошо для моей формы. Единственное, что я не смог сделать, это показать текущее выбранное значение при редактировании. Это был поиск стороннего API, сохранение новых и редактирование старых записей. Через некоторое время я понял, что мне не нужно правильно устанавливать значение, только метка внутри поля, потому что, если пользователь не меняет поле, ничего не происходит. После поиска и поиска у многих людей, имеющих проблемы с этим, я решил сделать это с помощью чистого Javascript. Это сработало, и я написал, возможно, чтобы помочь кому-то. Я также предлагаю установить таймер для этого.