10
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
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 550191
Url: https://administrator.de/contentid/550191
Printed on: April 23, 2024 at 18:04 o'clock
10 Comments
Latest comment
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.
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.
1
Hallo,
Ich würde das mit CSS und Jquery lösen.
CSS:
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
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
2
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.
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?
1
Punkt für dich.
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
1
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>$('select.mydd option[value="' + selected[i] + '"]').hide();
Danke für den Zaunpfahl ...
