Dies gehört zu Codes vor select2 Version 4
Ich habe einen einfachen Code von select2
, der Daten von Ajax bezieht
$("#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; }
});
Dieser Code funktioniert, jedoch muss ich einen Wert wie im Bearbeitungsmodus festlegen. Wenn der Benutzer zum ersten Mal einen Wert auswählt, wird er gespeichert. Wenn er diesen Wert bearbeiten muss, muss er im selben Auswahlmenü (select2
) angezeigt werden, um den zuvor ausgewählten Wert auszuwählen, aber ich finde keinen Weg.
AKTUALISIEREN:
Der HTML-Code:
<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">
Select2 programmatischer Zugriff funktioniert nicht damit.
So legen Sie den "ausgewählten" Wert einer Select2-Komponente dynamisch fest:
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
Der zweite Parameter ist ein Objekt mit erwarteten Werten.
UPDATE:
Das klappt, ich wollte nur beachten, dass "a_key" ist "Text" in einem neuen select2-Objekt. also: {id: 100, text: 'Lorem Ipsum'}
Beispiel:
$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});
Danke an @NoobishPro
SELECT2 <V4
<input name="mySelect2" type="hidden" id="mySelect2">
$("#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;
}
});
$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});
Wenn Sie select2 ohne AJAX verwenden, können Sie Folgendes tun:
<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");
Sie können dies auch tun:
$("#mySelect2").select2("val", "0");
SELECT2 V4
Für select2 v4 können Sie eine Option/s direkt wie folgt anhängen:
<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
<option value="TheID" selected="selected">The text</option>
</select>
Oder mit JQuery:
var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
$("#myMultipleSelect2").append($newOption).trigger('change');
anderes Beispiel
$("#myMultipleSelect2").val(5).trigger('change');
Wie ich es auch versucht habe, wenn ajax in select2 verwendet wird, funktionieren die programmatischen Steuerungs Methoden zum Setzen neuer Werte in select2 nicht für mich! Jetzt schreibe ich diesen Code, um das Problem zu beheben:
$('#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
Sie können den vollständigen Beispielcode in diesem Link testen: https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
In diesem Beispielcode ist ein Ajax select2 enthalten, und Sie können einen neuen Wert mit einer Schaltfläche festlegen.
$("#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>
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');
var $option = $("<option selected></option>").val('1').text("Pick me");
$('#select_id').append($option).trigger('change');
Versuchen Sie es mit diesem Anhängen und wählen Sie dann aus. Die Option wird beim Aufruf von AJAX nicht dupliziert.
In der aktuellen Version von select2
- v4.0.1
können Sie den Wert folgendermaßen einstellen:
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>
Ich mochte das
$("#drpServices").select2().val("0").trigger("change");
Ich denke, Sie benötigen die initSelection
-Funktion
$("#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; }
});
Verwenden Sie für Ajax $(".select2").val("").trigger("change")
. Das sollte das Problem lösen.
In Select2 V.4
benutze $('selector').select2().val(value_to_select).trigger('change');
Ich denke es sollte funktionieren
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');
Du solltest benutzen:
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
});
In select2 < version4
gibt es die Option initSelection()
für das Fernladen von Daten, durch die es möglich ist, den Anfangswert für die Eingabe wie im Bearbeitungsmodus festzulegen.
$("#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
});
Quelldokumentation: Select2 - 3.5.3
Manchmal wird select2()
zuerst geladen, wodurch das Steuerelement den zuvor ausgewählten Wert nicht korrekt anzeigt. Eine Verzögerung für einige Sekunden kann dieses Problem beheben.
setTimeout(function(){
$('#costcentreid').select2();
},3000);
Stellen Sie den Wert ein und lösen Sie das Änderungsereignis sofort aus.
$('#selectteam').val([183,182]).trigger('change');
Schön und einfach:
document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";
Und Sie ändern id_city
in die ID Ihrer Auswahl.
Edit: Nach Glen's Kommentar muss ich erklären, warum und wie es für mich funktioniert hat:
Ich hatte select2
für mein Formular wirklich schön gemacht. Das einzige, was ich nicht machen konnte, war, den aktuell ausgewählten Wert während der Bearbeitung anzuzeigen. Es wurde nach einer API eines Drittanbieters gesucht, um neue zu speichern und alte Datensätze zu bearbeiten. Nach einer Weile wurde mir klar, dass ich den Wert nicht richtig einstellen musste, nur die Beschriftung im Feld, denn wenn der Benutzer das Feld nicht ändert, passiert nichts. Nach der Suche und Suche nach einer Menge Leute, die Probleme damit hatten, entschied ich mich, es mit reinem Javascript zu machen. Es hat funktioniert und ich habe gepostet, vielleicht jemandem zu helfen. Ich schlage auch vor, einen Timer dafür einzustellen.
Ich habe so etwas gemacht, um Elemente in select2 ajax dropdown voreinzustellen
//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
Ich möchte nur irgendjemandem hinzufügen, der vielleicht mit mir das gleiche Problem hatte.
Ich habe versucht, die ausgewählte Option meiner dynamisch geladenen Optionen (von AJAX) einzustellen, und habe versucht, eine der Optionen als ausgewählt festzulegen, abhängig von einer bestimmten Logik.
Mein Problem trat auf, weil ich nicht versuchte, die ausgewählte Option basierend auf der ID festzulegen, die mit dem Wert übereinstimmen muss, nicht mit dem Wert, der mit dem Namen übereinstimmt!
sie können diesen Code verwenden:
$("#programid").val(["number:2", "number:3"]).trigger("change");
dabei sind 2 in "number: 2" und 3 in "number: 3" das ID-Feld im Objektarray
Eine Antwort von Phan funktionierte für mich:
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
Das Hinzufügen der Änderung löst jedoch das Ereignis aus
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
Wenn Sie ein Eingabefeld verwenden, müssen Sie die Eigenschaft "multiple" mit dem Wert "true" festlegen. Zum Beispiel,
<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>
Für mehrere Werte etwa so:
$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));
das wird so etwas übersetzen
$("#HouseIds").select2("val", [35293,49525]);