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

[GELÖST] Eintrag aus Selectbox verschieben

K

ktver

Guest
Hallo,

ich habe mal eine Frage, ich komme hier nicht weiter.

Ich habe ein Selectfeld:
PHP: 
echo '<select style="width: 100%; overflow-x: scroll;" id="test_selection[' . $key . '][' . $key2 . ']" name="test_selection[' . $key . '][' . $key2 . ']" size="10">';

Und ein Button:
PHP: 
echo '<td class="grid" style="text-align: center;"><input type="button" id="value_moveto_right[' . $key . '][' . $key2 . ']" name="value_moveto_right[' . $key . '][' . $key2 . ']" value="  ⇒  " title=""></td>';

Ich möchte, wenn ich auf den Button klicke, den selektierten Eintrag aus der Selectbox in eine andere Selectbox verschieben. Bevor ich weiter mache, möchte ich mir den selektierten Eintrag erstmal zum testen via alert ausgeben lassen:
Code: 
<script type="text/javascript">
$(document).ready(function(){
	$("input[id^='value_moveto_right']").on("click", function() {
		var id = this.id.replace("value_moveto_right", "");
	    alert("Test: " + $("#test_selection" + id).attr('selected'));
	})
})
</script>

Ich bekomme immer die Meldung: undefined.
Ich denke erstmal liegt das an: $("#test_selection" + id), kann ich nicht so wieder zusammenfügen, wegen (id="test_selection[' . $key . '][' . $key2 . ']"), oder?
Kann mir jemand bitte helfen?
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

ich habe das Problem jetzt so gelöst:
Code: 
	// Option-Eintrag von links nach rechts
	$("input[id^='value_moveto_right']").on("click", function() {
		
		var id = $(this).attr('id').replace("value_moveto_right", "");
		var option_value = $("select[name='test_selection"+id+"']").val();
		var option_text = $("select[name='test_selection"+id+"'] option[value='"+option_value+"']").text();
		
		$("select[name='test_answer"+id+"']").append("<option value="+option_value+">"+option_text+"</option>");
		$("select[name='test_selection"+id+"'] option[value='"+option_value+"']").hide();
		
	})

Funktioniert wunderbar.

Nächstes und letztes Problem:
Zur Zeit werden die Options einfach immer unten rangehängt. Ich möchte natürlich, das der User die einzelnen Options via Buttons nach oben oder nach unten verschieben kann, also er soll die Sortierung der Options selbst bestimmen können.

Gibt es dazu eine Funktion wie zum Beispiel: option.index = 5 und nicht mehr 6, sowas in der art?
 
Ich habe eine Lösung gefunden, allerdings nicht selbst ausgedacht.

Code: 
	// Option-Einträge Abwärts
	$("input[id^='value_moveto_down']").on("click", function() {
		
		var id = $(this).attr('id').replace("value_moveto_down", "");
		var $op = $('select[name="test_answer'+id+'"] option:selected'),
			$this = $(this);
		
		if($op.length){
			$op.last().next().after($op);
		}
		
	})

Kann mir jemand erklären, was es mit $op.last().next().after($op); auf sich hat?
 
ktver schrieb:
Kann mir jemand erklären, was es mit $op.last().next().after($op); auf sich hat?
Zum Vergrößern anklicken....
https://api.jquery.com/last/
https://api.jquery.com/next/
.after() | jQuery API Documentation
wobei das last hier nicht ganz richtig ist. es wird angenommen, dass nur eine option selected ist. mit last() greifst du dann immer auf diese eine zu. sind doch mehrere da, werden alle anderen nicht richtig verschoben sondern wandern zur letzten.
soll nur eine selected sein ist es besser das auch zu prüfen
Code: 
if($op.length == 1)
{
  $op.next().after($op);
}
else
{
// fehler
}
 
Okay, danke nochmal für den Hinweis.

Eine Sache hätte ich jetzt doch noch. Folgender Code:
Code: 
		$("select[name='test_selection"+id+"'] option[value='"+option_value+"']").addClass('txt_red');
Ich möchte einem ausgewählten Listeneintrag einer Auswahlliste eine class zuweisen. Das funktioniert im Chrome und Firefox wunderbar.
Aber der Internet Explorer sowie Edge brauchen natürlich wieder eine Extra-Wurst.
Ich habe es auch schon mit .css('color', '#FF0000') probiert, geht ebenfalls nicht.

Hat jemand eine Idee, wie ich das in den Browsern auch hinbekomme?
 
Eine Fehlermeldung wird leider nicht ausgegeben (F12 ie).
Und es passiert einfach nichts. Die Anweisung wird einfach im IE und Edge ignoriert.

Wie gesagt, ich habe es auch schon mit .css('color', '#FF0000') probiert, auch das geht nicht.
Während komischerweise die Hintergrundfarbe funktioniert: .css('background-color', '#FF0000'), aber die Schriftfarbe eben nicht.
 
Die <option>s in einem <select> zu formatieren ist nicht immer möglich, wie du ja schon gesehen hast. Da du aber sowieso ziemlich weit von einem Standard-<select> weg bist, wird er wahrscheinlich besser sien, wenn du dir eines der vielen JS-<select>s suchst, die mit anderen Nodetypen sowas nachbauen. Dann hast du volle Kontrolle darübe, wie das Zeugs aussieht.
 
Hm,

also irgendwie funktioniert es doch nicht so wie erhofft.
PHP: 
echo '<select style="width: 100%;" id="test_selection[' . $key . '][' . $key2 . ']" name="test_selection[' . $key . '][' . $key2 . '][]" size="10" multiple>';
echo '<select style="width: 100%;" id="test_answer[' . $key . '][' . $key2 . ']" name="test_answer[' . $key . '][' . $key2 . '][]" size="10" multiple>';
Der Button zum auslösen:
PHP: 
echo '<input type="button" id="value_moveto_right[' . $key . '][' . $key2 . ']" name="value_moveto_right[' . $key . '][' . $key2 . ']" value="  ⇒  " title="">';
Und hier JQuery:
Code: 
function moveSelectedItems(source, destination){
    var selected = $("select[id='"+source+"'] option:selected").remove();
    var sorted = $.makeArray($("select[id='"+destination+"'] option'").add(selected)).sort(function(a,b){
     return $(a).text() > $(b).text() ? 1:-1;
     });
    $("select[id='"+destination+"']").empty().append(sorted);
}




$(document).ready(function(){	

		$("input[id^='value_moveto_right']").click(function(){
			var id = $(this).attr('id').replace("value_moveto_right", "");
			moveSelectedItems('test_selection'+id, 'test_answer'+id);
		});
}
Ich bekomme das aber nicht zum laufen, kann mir jemand noch einen Tipp geben?
Also die Option in der QuellSelectBox werden zwar gelöscht, aber der ZielSelectBox nicht zugefügt.

- - - Aktualisiert - - -

Alles gut, da war ein ' zu viel.
So ist besser:
Code: 
var sorted = $.makeArray($("select[id='"+destination+"'] option") ...
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben