Ergebnis 1 bis 5 von 5
  1. #1
    sonic29 ist offline Grünschnabel
    registriert
    07-05-2010
    Beiträge
    3

    <select> voneinander abhängig

    Hallo,

    ich suche ein javascript, das folgendes kann:

    ich habe zwei <select> Auswahllisten in html, die voneinander abhängig sind.
    wenn in der einen liste bspw. die options sind:

    A,B,C, soll zunächstmal der mögliche inhalt der ersten auswahllste sein. die zweiten liste soll auch als optionen A,B,C haben, aber wird in einer von den beiden listen z.B. A ausgewählt soll "onChange" das auswählen von A in der anderen liste nicht mehr möglich sein und aus der auswahl solange verschwinden bis der benutzer in der anderen liste wieder etwas anderes auswählt, usw.

    sonic29

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.664

  3. #3
    Avatar von Junkee[]
    Junkee[] ist offline Lounge-Member
    registriert
    08-05-2009
    Ort
    Leonberg
    Beiträge
    3.169

    AW: <select> voneinander abhängig

    du legst einfach ein Array an und speicherst darin alle Ausgewählten Optionen. Bei einer änderung aktutalisierst du das Array und stellst jeden input der den gleichen Wert hat auf disabled. Auf der Serverseite muss du nochmals überprüfen ob jeder Wert höchstens einmal vorkommt, weil JS deaktiveiert sein kann.

    edit: zu spät

  4. #4
    sonic29 ist offline Grünschnabel
    registriert
    07-05-2010
    Beiträge
    3

    AW: <select> voneinander abhängig

    danke kkapsner.
    das läuft schon ganz gut, aber habe noch ein paar probleme das script mehrmals auf einer .jsp aufzurufen und zwar bei mehrere selecttypen...
    (es geht um ein fussballaufstellungsformular) ich lade über eine datenbank den inhalt der infrage kommenden spieler in die optionen der einzelnen selects. das klappt auch soweit, allerdings scheine ich noch irgendwo einige fehler drin zu haben.. momentan ist es möglich plötzlich stürmer im mittelfeld aufzustellen und anders herum :-/

    Der Tag bei dem alle Spieler in die optionen geladen werden:
    arraylist mittelfeld enthält alle mittelfeldspieler und arraylist sturm enthält alle stürmer...
    Code:
    	out.println("<form name=\"spiel2\">");
    				out.println("<select id=\"spieler4\" name=\"sturm\" onchange=\"selectSpieler2(this);\">");
    				out.println("<option value\"\">---</option>");
    				for(int i=0;i<sturm.size();i++) {
    					String value = sturm.get(i).toString();
    					out.println("<option value=" + sturm.get(i).toString() + ">" + sturm.get(i) + "</option>");					
    				}
    				out.println("</select>");
    				out.println("</form><br /><br /><br />");
    				out.println("<form name=\"spiel\">");
    				out.println("<select id=\"spieler0\" name=\"mittelfeld\" onchange=\"selectSpieler(this);\">");
    				out.println("<option value\"\">---</option>");
    				for(int i=0;i<mittelfeld.size();i++) {
    					String value = mittelfeld.get(i).toString();
    					out.println("<option value=" + mittelfeld.get(i).toString() + ">" + mittelfeld.get(i) + "</option>");					
    				}
    				out.println("</select>");
    				out.println("</form>");
    die scripts in der zutreffenden .jsp:
    HTML-Code:
    <script type="text/javascript">
    function selectSpieler2(feld){
    	var opt = feld.getElementsByTagName("option")[feld.selectedIndex];
    	
    	
    	for (var i = 0; i < 2; i++){
    		var spieler = document.getElementById("spieler" + i);
    		if (spieler != feld){
    			if (feld.lastSelection){
    				var oldOpt = document.createElement("option");
    				spieler.options.add(oldOpt);
    				
    				oldOpt.value = feld.lastSelection.value;
    				oldOpt.innerHTML = feld.lastSelection.innerHTML;
    			}
    			
    			if (opt.value == "") continue;
    			var options = spieler.options;
    			for (var j = 0; j < options.length; j++){
    				if (options.item(j).value == opt.value){
    					if (options.remove) options.remove(j);
    					else spieler.removeChild(options.item(j));
    					break;
    				}
    			}
    		}
    	}
    	
    	if (opt.value != "") feld.lastSelection = opt;
    	else feld.lastSelection = false;
    }
    </script> 
    <script type="text/javascript">
    function selectSpieler(feld){
    	var opt = feld.getElementsByTagName("option")[feld.selectedIndex];
    	
    	
    	for (var i = 0; i < 4; i++){
    		var spieler = document.getElementById("spieler" + i);
    		if (spieler != feld){
    			if (feld.lastSelection){
    				var oldOpt = document.createElement("option");
    				spieler.options.add(oldOpt);
    				
    				oldOpt.value = feld.lastSelection.value;
    				oldOpt.innerHTML = feld.lastSelection.innerHTML;
    			}
    			
    			if (opt.value == "") continue;
    			var options = spieler.options;
    			for (var j = 0; j < options.length; j++){
    				if (options.item(j).value == opt.value){
    					if (options.remove) options.remove(j);
    					else spieler.removeChild(options.item(j));
    					break;
    				}
    			}
    		}
    	}
    	
    	if (opt.value != "") feld.lastSelection = opt;
    	else feld.lastSelection = false;
    }
    </script> 
    
    
    <script type="text/javascript">
    var spieler2 = document.getElementById("spieler4");
    for (var i = 1; i < 2; i++){
    	var nSpieler = spieler2.cloneNode(true);
    	nSpieler.id = "spieler" + i;
    	spieler2.parentNode.insertBefore(nSpieler, spieler2);
    }
    </script> 
    <script type="text/javascript">
    var spieler = document.getElementById("spieler0");
    for (var i = 1; i < 4; i++){
    	var nSpieler = spieler.cloneNode(true);
    	nSpieler.id = "spieler" + i;
    	spieler.parentNode.insertBefore(nSpieler, spieler);
    }
    </script> 
    Gibts vielleicht die möglichkeit das ganz dynamischer zu gestalten ohne mehrere methoden innerhalb des javascripts??

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.664

    AW: <select> voneinander abhängig

    Das Skript ist auch nicht dazu gedacht öfters auf einer Seite zu laufen... dazu müsste man es etwas umschreiben.
    Meine Idee wäre jetzt, dass man der Funktion das Präfix des Selectes und die maximale Indexnummer als Parameter übergibt. Dann nennst du deine eine Selectgruppe sturm0..2 und die andere mittelfeld0..4 und dann bekommst du auch kein Problem mehr mit dem "überspringen" der Spieler.

Ähnliche Themen

  1. Text abhängig von Dropdown-Menü
    Von markus-s im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 10-06-2010, 14:35
  2. drei Select-Boxen sind von einander abhängig..
    Von alona im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 16-02-2009, 16:41
  3. Abhängig von der Auflösung <DIV> verschieben
    Von Tobi84 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 06-01-2007, 15:24
  4. Antworten: 6
    Letzter Beitrag: 13-01-2006, 20:25
  5. Antworten: 2
    Letzter Beitrag: 20-03-2004, 22:46

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •