• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[GELÖST] Bestimmte Option in dynamisch befülltem Jquery Select2 Plugin auswählen in Modal

J

Jan42

New member
Hallo zusammen,

ich bin neu hier und hoffe ich mache in meinem ersten Post alles richtig...;):grin:
Seit Tagen verzweifle ich an dem Select2 Plugin, dass ich in einem Bootstrap Modal nutzen will. Das klappt irgendwie nur semi gut...
Also das ist das Plugin, welches ich nutze: https://select2.github.io/examples.html

Das ist das Modal in dem ich das Plugin nutze:

HTML: 
<div class="modal fade" id="editAdminPopup" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                .....
		
			<select class="form-control select2" id="modal_edit_groupid" style="width: 100%;">
			</select>
		.....
	</div>

Dieses Modal befülle in meiner inkludierten .js wie folgt.
Ich hab nen PHP Skript im Backend, dass die Werte aus einer DB ausliest und per JSON Format zurückgibt (das onchange Event kann vernachlässigt werden). Die Werte werden dann in die Select2 Auswahlbox aufgenommen:

Code: 
var $new_admin_edit_select = $('#modal_edit_groupid').select2({
		initSelection: function(element, callback) {
			callback({id: 0, text: 'Keine Gruppe' });
		},
		ajax: {
			url: "admins_ops.php?list_groups=1&input=select",
			dataType: 'json',
			processResults: function (data) {
				return {
					
					results: data
				};
			},
			cache: false	
			
		}
		

	}).on('change', function (e) {
		var group_id = this.value;	
		
		var formData = {
						'action'              		:'getgroupdata',
						'id'						: group_id	
						};
			
			$.ajax({
						type        : 'POST',
						url         : 'admins_ops.php',
						data        : formData,
						dataType    : 'json' 
					})
					
					.done(function(data) {

							if (!data.success) {			//error
								
							} else {						//success
									activate_group_settings(data.admindata[0]['rechte'],'editAdminPopup');
							}

						});


	}).on('open.select2', function (e) {
		callback({id: 0, text: 'Keine Gruppe' });
		
	});
Das funktioniert auch soweit. Ich bekomme die Werte also auch ordentlich angezeigt. Nun zum Problem:
Ich möchte jetzt aus diesen ausgelesenen Werten einen bestimmten Wert auswählen bzw. den aktuell ausgewählten Wert ändern und das will einfach nicht...

Ich habe schon diverse Befehle versucht wie:
Code: 
$('#modal_edit_groupid').select2('val', {id: '3', text: 'bla'}, true).trigger('change');
oder
$('#modal_edit_groupid').val('19').trigger("change");
oder
$('#modal_edit_groupid').find('option[value="12"]').prop("selected",true);
oder
$("#modal_edit_groupid").prop("selectedIndex", 1);

Nix davon funktioniert. Ich habe auch was davon gelesen, dass es daran liegen kann, das ich es in einem Modal nutze. Hat schon mal jemand ein dynamisch befülltes Select2 in einem Modal genutzt und vll die gleiche Herausforderung gehabt? Ich verstehe nicht wieso ich die ausgewählte <option> nicht verändern kann...
Der Witz ist auch, dass die Konsole keinen Fehler ausgibt (sie gibt nichts aus...).

Ich kann ggf. auch versuche eine frei zugängliche Demo zu basteln, ist nur bissl aufwendig, da der gesamte Krempel sich hinter nem Login befindet und ich dann einiges umbauen muss...

Danke im Voraus & Gruß,
Jan
 
Zuletzt bearbeitet von einem Moderator:
Das habe ich bereits versucht. Er ändert aber nicht die Auswahl und ich bekomme auch keinen Fehler oder sonst iwas in der Konsole angezeigt.

Code: 
$new_admin_edit_select.val("20").trigger("change");

Wenn ich mir den HTML Code direkt nach Laden der Seite anschaue, dann hat das Select Feld auch erstmal keine Options (obwohl die Options angezeigt werden).
Sieht also erstmal so aus:
HTML: 
<select id="modal_edit_groupid" class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true"> </select>

Wenn ich dann in das Select Feld hineinklicke und eine andere Option manuell auswähle, dann erscheint genau diese Option auch im HTML Code:
HTML: 
<select id="modal_edit_groupid" class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
<option value="20">abcdef111</option>
</select>

Wenn ich in das Feld hineinklicke wirkt es so als wenn die Daten erst bei Klick in das Feld geladen werden. Kann das eventuell damit zusammenhängen?
Die Daten sollen eigentlich direkt nach Seitenladen zur Verfügung stehen und nicht erst wenn ich in das Select Feld klicke...

Gruß,
Jan
 
Zuletzt bearbeitet:
Jan42 schrieb:
Wenn ich in das Feld hineinklicke wirkt es so als wenn die Daten erst bei Klick in das Feld geladen werden. Kann das eventuell damit zusammenhängen?
Zum Vergrößern anklicken....
soweit ich das hier sehe,
https://select2.github.io/examples.html#data-ajax
wird beim laden über ajax nur das ausgewählte element in das select aufgenommen, beim nächsten mal wird wieder alles geladen und dann die neue auswahl übernommen
das was du möchtest, ist vermutlich eher das
https://select2.github.io/examples.html#data-array
du lädst über einen request ein json-array und initialisierst damit dein select
 
Hmm okay.
D.h. ich sollte ich mir vorher den data JSON array "manuell" holen und das select2 dann per data-array (und nicht data-ajax) zusammenbauen, richtig? ;)
 
Perfekt das hat geholfen! Endlich!

Eine kleine Sache/ Frage noch. Ich rufe auch eine GruppenID per JSON ab, die dann halt per JS ausgewählt werden soll.
Die Zeile 2 klappt wunderbar (Die Option mit value="4" wird ausgewählt), der Alert in Zeile 1 gibt auch "4" aus, aber Zeile 3 mag dann nicht den Wert mit 4 selektieren...
Code: 
alert(data.admindata[0]['gid']);
$new_admin_edit_select.val("4").trigger("change");	
$new_admin_edit_select.val(data.admindata[0]['gid']).trigger("change");

Irgendein Typenproblem oder so??

Sehr vielen Dank schonmal!!
 
Hi!
Ich hab den Fehler endlich gefunden. Es hatte nichts mit der Variable oder dem Typ zu tun. Ich hatte zwischendrin noch ein Schnipsel Code der mit den JSON response data zerschossen hat.
Daher war die gid dann auch futsch!
Habt mir alle sehr geholfen! Ich danke euch!

*Thread can be closed* :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben