Mehrere Selects beschränken

[Serenity363]

Hallo

Ich hab da mal eine kleine frage, an der ich für eine Projektarbeit für die Schule schon seit Tagen sitze.

es geht um folgendes Problem:

Ich habe eine maximale Anzahl an Einheiten, in diesem Fall 7.
Jetzt möchte ich 4 Selects haben, eines für rote Kugeln, eines für Blaue, eines für Gruene und eines für Gelbe.
Und wenn ich den ersten select anklicke, sollen da die optionen von 0-7 möglich sein. angenommen ich würde 4 auswählen, sollen alle anderen selects nur noch die optionen 0-3 haben.
Die optionen sollen aber nicht gelöscht werden, sondern nur ausgegraut, oder nichtmehr angezeigt werden.

Im Moment sieht das Codefragment dafür so aus:

<table width="100%">
                        <tr>
                            <script type="text/javascript">
                            var maxvalue =7;
                            document.write("<td bgcolor='#FF0000' width='25%' align='center'>Rot");
                            document.write("<select name='Red' onchange='maxvalueadjust();'>");
                                document.write("<option>0</option>");
                                document.write("<option>1</option>");
                                document.write("<option>2</option>");
                                document.write("<option>3</option>");
                                document.write("<option>4</option>");
                                document.write("<option>5</option>");
                                document.write("<option>6</option>");
                                document.write("<option>7</option>");
                            document.write("</select>");
                            document.write("</td>");

document.write("<td bgcolor='#0000FF' width='25%' align='center'>Blau");

document.write("</td>");

document.write("<td bgcolor='#00FF00' width='25%' align='center'>Gruen");

document.write("</td>");

document.write("<td bgcolor='#FFFF00' width='25%' align='center'>Gelb");

document.write("</td>");

function maxvalueadjust(farbe)
                            {

}
                            </script>
                        </tr>
                    </table>

Nur hab ich schon alles mögliche ausprobiert und gegoogled, aber ich komm einfach zu keinem Funktionierenden Ergebnis. Hat jemand eine Idee wie man das umsetzen könnte?

[1UnitedPower]

Nur hab ich schon alles mögliche ausprobiert und gegoogled, aber ich komm einfach zu keinem Funktionierenden Ergebnis. Hat jemand eine Idee wie man das umsetzen könnte?

Weit bist du noch nicht gekommen, du hast dir bisher nur das Leben schwer gemacht. Dein Code lässt auf folgendes reduzieren.

<table width="100%">  
	<tr>  
		<script type="text/javascript">  
			var maxvalue =7;  
			function maxvalueadjust(farbe)  
			{  
				  
				  
			}  
		</script>  
		<td bgcolor='#FF0000' width='25%' align='center'>Rot  
			<select name='Red' onchange='maxvalueadjust();'>  
				<option>0</option>  
				<option>1</option>  
				<option>2</option>  
				<option>3</option>  
				<option>4</option>  
				<option>5</option>  
				<option>6</option>  
				<option>7</option>  
			</select>  
		</td>  
		  
		<td bgcolor='#0000FF' width='25%' align='center'>Blau</td>  
		  
		<td bgcolor='#00FF00' width='25%' align='center'>Gruen</td>  
		  
		<td bgcolor='#FFFF00' width='25%' align='center'>Gelb</td>  
		  
	</tr>  
</table>

Die ganzen document.write-Statements sind in der sequenziellen Art und Weise, wie sie benutzt, völlig überflüssig. Du kannst den HTML-Code darin auch gleich als HTML-Code notieren.

Du hast bisher also eine Variable maxvalue und einen leeren Event-Handler maxvalueadjust. Der Event-Handler ist immerhin schonmal für das erste <select>-Element registriert. Du kannst also davon ausgehen, dass die Funktion ausgeführt wird, wenn du den Eingabe-Wert änderst.

Wenn ich deinen Ansatz richtig verstehe, hattest du vor bei einer Eingabe-Änderung, die das nächste <select>-Element für die Blauen Kugeln zu erzeugen, bei Auswahl der blauen Kugeln wolltest du dann mit den Grünen soweiter machen und so weiter so fort.

Ist es eine Vorgabe, dass zu immer erst rote, dann blaue, dann grüne und dann blaue Kugeln gezogen werden? Oder kann in jeder beliebigen Reihenfolge gezogen werden. Außerdem steht noch die Frage im Raum, ob sich das Maximum der zu ziehenden Kugeln ändern kann. In diesem Fall würde es nicht ausreichen, die Eingabefelder als statischen HTML-Code zu generieren.

In jedem Fall rate ich zu einem anderen Ansatz. Erzeuge zuerst alle nötigen Eingabefelder. Und registriere für jedes den Event-Handler (die Funktion maxvalueadjust ). Diese Funktion prüft dann wieviele Kugeln eingeben wurden und passt dann alle anderen Eingabefelder an. Das Anpassen kannst du über die enabled-Eigenschaft der einzelnen option-Elemente steuern.

Für mehr Hilfe, müssten wir etwas über deine Vorkenntnisse erfahren. Sagen dir zum Beispiel Schleifen etwas, oder hast du schonmal mit dem DOM (Document Object Model) gearbeitet?

[1UnitedPower]

Ich habe dir mal ein stark vereinfachtestes Beispiel gebastelt. Ich habe es absichtlich unkommentiert gelassen, damit du dich eindenken und es verstehen musst, bevor du es an deine Aufgabe anpasst.

http://jsfiddle.net/xRT9Z/

Wie immer beim Lotto ohne Gewähr.

[Serenity363]

Hey
Danke schonmal für das Beispiel :)
Die Reihenfolge in der Auswahl ist egal, rot muss nicht zuerst kommen.

Ich hab Erfahrung mit c, c++, c# und Grundlagen Java, Schleifen, Bedingungen usw sind also kein verständnisproblem. Mit Javascript leider fast keine.