DropDown onChange Optionen entfernen

Moin Zusammen,

ich bräuchte nochmal einen Anstoß.

Beispiel: Eine Seite auf der 10 DropDownfelder sind. Diese Felder sollen mit den Zahlen 0 bis 10 gefüllt werden.
Wenn ich nun im ersten Select-Feld die 1 auswähle soll diese in den anderen verschwinden. Gleiches gilt für die anderen auch. Also wenn ich in jedem Feld was gewählt habe soll zu guter Letzt nur noch die 0 übrig sein zur Auswahl, welche aber bleiben muss. Wichtig: Die 0 muss in allen Feldern bleiben!

Jemand eine Idee wie ich das umsetzen kann mit JS?

Grüße
x

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 550191

Url: https://administrator.de/forum/dropdown-onchange-optionen-entfernen-550191.html

Ausgedruckt am: 30.04.2025 um 07:04 Uhr

10 Kommentare

Neuester Kommentar

Hm...

ich würde mir beim laden der Seite ein Array initialisieren, das die Werte von 0-10 enthält.

Dann ein temporäres Array erstellen erzeugen das die noch verfügbaren Werte enthält.

Und ein temporäres Array das die schon reservierten Werte enthält.

Eine Funktion schreiben die bei der Auswahl eines Wertes in einem Dropdown-Feld den ausgewählten Index aus dem temporären Array entfernt und dem reservierten Array hinzufügt, zu guter letzt eine Funktion die die Dropdownfelder mit den aktualisierten Werten befüllt. Evtl. mit vorheriger Prüfung ob es sich um ein DropDown mit Wert '0' handelt oder nicht und dann nur die '0'er zu ändern.

Ich würde aber auch eine Funktion einbauen, die einen schon belegten Wert wieder freigibt. Prüft also, ob der Wert der im Dropdown ausgewählt war im reservierten Array war und legt diesen dann wieder in das verfügbare Array....

kann man sicher eleganter lösen, aber als erster Ansatz könnte es helfen.

Hallo,

Ich würde das mit CSS und Jquery lösen.

CSS:

<style>
.hide {display:none;}
</style>

In Jquery dann bei allen <option> die Klasse hide mit .addclass hinzufügen, wenn deren Value deiner Auswahl entspricht - ausgenommen Value == 0.

Soweit zur anstößigen Idee

Gruß
eisbein

PS: CSS korrigiert

Wird es dann nur nicht angezeigt und ist trotzdem wählbar? Bin nicht so fit mit jQuery würde mich daher echt interessieren.

Danke schon mal für die Antwort.

Wird es dann nur nicht angezeigt und ist trotzdem wählbar?

Wie willst du etwas auswählen, das nicht angezeigt wird?

Punkt für dich.

Fast.

Habe es gerade getestet. Es sollte nicht visibility: hidden sondern display:none lauten.

Gut dass wir drüber gerdet haben

Zitat von @TRDSRLZ:

Gut dass wir drüber gerdet haben

Hier ein Beispiel

Gruß

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Demo DropDowns</title>
</head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>  
<script type="text/javascript">  
var items =[0,1,2,3,4,5,6,7,8,9,10];
$(document).ready(function(e) {
	// populate all fields
	$('select.mydd').each(function(index, element) {  
        for (i= 0;i < items.length;i++){
			element.append(new Option(i,i));
		}
    });
	// add change handler
	$('select.mydd').change(function(e) {  
		// load selected values into array
		var selected = ;
        $('select.mydd').each(function(index, element) {  
        	if(element.value != 0){
				selected.push(element.value);
			}
        });
		// show all
		$('select.mydd option').show();  
		// hide slected
		for (i= 0;i < selected.length;i++){			
			$('select.mydd option[value="' +  selected[i] + '"]').hide();  
		}
    });
	
});
</script>
<body>
<select class="mydd" id="dd1"></select>  
<select class="mydd" id="dd2"></select>  
<select class="mydd" id="dd3"></select>  
<select class="mydd" id="dd4"></select>  
<select class="mydd" id="dd5"></select>  
<select class="mydd" id="dd6"></select>  
<select class="mydd" id="dd7"></select>  
<select class="mydd" id="dd8"></select>  
<select class="mydd" id="dd9"></select>  
<select class="mydd" id="dd10"></select>  

</body>
</html>