Auswahlbox Filtern über 2 Filterboxen

C

CaptNick

Mitglied
HTML: 
<p>Filteroption 1:

  <select name="Filter" id="Filter">
    <option value="1">Eins</option>
    <option value="2">Zwei</option>
    <option value="3">Drei</option>
  </select>
<br>
Filteroption 2:
<select name="Filter2" id="Filter2">
  <option value="1">Rot</option>
  <option value="2">Gr&uuml;n</option>
  <option value="3">Blau</option>
</select>

<p>Auswahlbox: 
  <select name="Auswahl" id="Auswahl">
    <option value="1,2">Objekt 1</option>
    <option value="1,3">Objekt 2</option>
    <option value="1,1">Objekt 3</option>
    <option value="2,1">Objekt 4</option>
    <option value="3,2">Objekt 5</option>
  </select>
</p>

Ziel ist es mit den 2 oberen Filtern die in der Auswahlbox über die Value nur die options zu filtern die auch oben ausgewählt sind, die restlichen Felder sollen aus der Auswahl verschwinden. Die Auswahl wird per PHP aus einer SQL DAtenbank geladen (aber das ist hier nur sekundär.

Wie bekommt man das ganze am einfachsten hin, da ich nicht der große JS und Ajax experte bin, falls jemand nen Tut im Netz kennt, noch besser.
 
Damit wir uns richtig verstehen.

Ich wähle bei "Filteroption 1" den Wert 2 aus und bei "Filteroption 2" wähle ich den Wert 1 aus. In der "Auswahlliste" soll dann nur noch der Wert "Objekt 4" vorhanden sein.

Oder sollen bereits beim Auswählen in der "Filteroption 1" die Einträge in "Filteroption 2" und/oder "Auswahlliste" eingeschränkt werden?
 
Es soll bereits beim wählen der ersten Option eine Einschränkung vorgenommen werden also wenn ich zum Beispiel Filter Option 1 Auswähle, müssten noch Objekt 1, Objekt 2, Objekt 3 drin bleiben...

Das selbe natürlich wenn nur Filteroption 2 gewählt ist...
 
Zuletzt bearbeitet:
Also hier ist ein Beispiel wo so etwas ähnliches passiert.

Muss aber zugeben das ich es noch nicht so ganz durchschaue und deshalb auch nicht sagen kann wie man es auf deinen Fall "umbauen" müsste.

Vielleicht hilft es dir aber ja trotzdem weiter!?
 
Ja sowas ähnliches habe ich auch schon gefunden funktioniert halt hier über eingabe, vielleicht kann man das umbauen muss ich mir mal ansehen.
 
Nochmal eine Frage.

Ist sowohl bei Filter 1 als auch bei Filter 2 immer einer der Werte ausgewählt oder kann es sein das bei Filter 1 der Wert 2 und bei Filter 2 "Alle" markiert ist?
 
Bisher habe ich nichts hinbekommen womit man Einträge aus der Liste löschen oder wieder hinzufügen kann. Wenn du damit leben kannst das die "ungültigen" Einträge noch in der Liste sind aber nicht mehr ausgewählt werden können, habe ich was:


Javascript: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#Filter1, #Filter2").change(function () {
// zuerst alle Einträge deaktivieren
	$("#Auswahl option").attr("disabled", true);
// aktuelle Auswahl ermitteln
	wert = $("#Filter1").val() + "," + $("#Filter2").val();
// alle Einträge mit Auswahl vergleichen und die gültigen wieder aktivieren
	for (a = 0; a < document.getElementById("Auswahl").length; a++) {
		if (document.getElementById("Auswahl").options[a].value.indexOf(wert) != -1) {
			document.getElementById("Auswahl").options[a].disabled = false;
		}
	}
});

});

</script>

HTML: 
<p>Filteroption 1:
<select name="Filter" id="Filter1">
    <option value="">Auswahl</option>
    <option value="1">Eins</option>
    <option value="2">Zwei</option>
    <option value="3">Drei</option>
</select>
<br>
Filteroption 2:
<select name="Filter2" id="Filter2">
    <option value="">Auswahl</option>
    <option value="1">Rot</option>
    <option value="2">Gr&uuml;n</option>
    <option value="3">Blau</option>
</select>

<p>Auswahlbox:
<select name="Auswahl" id="Auswahl">
    <option value="1,1">Objekt 1</option>
    <option value="1,3">Objekt 2</option>
    <option value="1,1">Objekt 3</option>
    <option value="2,1">Objekt 4</option>
    <option value="3,2">Objekt 5</option>
</select>
</p>

So bald in einer der Listen Filter 1 oder Filter 2 ein Eintrag ausgewählt wird, kann man nur noch die gültigen Werte in der Auswahlbox auswählen.
 
gut das wäre halt ne inkomplette lösung, bei 100 und mehr "Objekten" in ner Liste trotzdem viel zu scrollen.

Vielleicht wäre es ja ne lösung den ganzen content für die Objektauswahl in nen JS Array zu verlagern und von dort nur die Einträge einzublenden.
 
Na dann:

Javascript: 
//jQuery muss hier eingebunden werden damit es funktioniert!
$(document).ready(function(){
var value = new Array ('1,1', '1,2', '1,3', '2,1', '3,2');
var text = new Array ('Objekt 1', 'Objekt 2', 'Objekt 3', 'Objekt 4', 'Objekt 5');

$("#Filter1, #Filter2").change(function () {
	wert = $("#Filter1").val() + "," + $("#Filter2").val();

	$("#Auswahl option").remove();
	for (a = 0; a < value.length; a++) {
		if (value[a].indexOf(wert) != -1) {
			$("#Auswahl").append('<option value="' + value[a] + '" >' + text[a] + '</option>');
		}
	}
});

});

Wenn die Daten durch PHP/mySQL geliefert werden, must du halt noch schauen wie du die Arrays befüllt bekommst. Aber das sollte kein Problem sein!

Einziger Haken daran ist eben die Größe der beiden Arrays je nachdem wieviel Daten hier ankommen.
 
Zuletzt bearbeitet:
vielleicht bin ich ja zu blöd aber mit dem code jetzt hier passiert gar nix weder mit den BRowsern die ich hier zur verfügung habe noch mit JSFiddle

HTML: 
<!doctype html>
<html>
<head>
<meta charset="iso-8859-2">
<title>Untitled Document</title>
<script src="jquery.js" type="text/javascript"></script>
</head>

<body><p>Filteroption 1:

  <select name="Filter1" id="Filter1">
    <option value="1">Eins</option>
    <option value="2">Zwei</option>
    <option value="3">Drei</option>
  </select>
<br>
Filteroption 2:
<select name="Filter2" id="Filter2">
  <option value="1">Rot</option>
  <option value="2">Gr&uuml;n</option>
  <option value="3">Blau</option>
</select>

<p>Auswahlbox: 
  <select name="Auswahl" id="Auswahl">
  </select>
</p>

<script>
$(document).ready(function(){
var value = new Array ('1,1', '1,2', '1,3', '2,1', '3,2');
var text = new Array ('Objekt 1', 'Objekt 2', 'Objekt 3', 'Objekt 4', 'Objekt 5');
 
$("#Filter1, #Filter2").change(function () {
    wert = $("#Filter1").val() + "," + $("#Filter2").val();
 
    $("#Auswahl option").remove();
    for (a = 0; a < options.length; a++) {
        if (value[a].indexOf(wert) != -1) {
            $("#Auswahl").append('<option value="' + value[a] + '" >' + text[a] + '</option>');
        }
    }
});
 
});
</script>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück