Javascript-Problem: Select-Felder in Formularen automatisch gruppieren

Keyser Soze · 19.08.2007, 17:36

Ich habe ein Javascript-Problem mit dem Theme-Portal. Und zwar möchte ich gerne, dass beim Upload neuer Themes in dem Formular, sobald man ein bestimmtes Handy ausgewählt hat, auch alle anderen "kompatiblen" Handys automatisch ausgewählt werden (siehe angehänger Screenshot).
Ein Beispiel:
Wenn man das K800i auswählt, sollen per JavaScript automatisch auch das K790i, K810i, S500i, W580i, W830i und das W850i ausgewählt werden.

Gibt es bereits irgendwo ein fertiges JavaScript, mit dem man in einem Select-Feld eines HTML-Formulars verschiedene Felder wie oben beschrieben zu Gruppen zusammenfassen und automatisch mitselektieren lassen kann?

Keyser Soze · 28.03.2008, 14:11

Jippie. Ich habe es nun selber hingebekommen, nachdem ich mich nach einiger Zeit noch mal drangesetzt hatte. Falls jemand über Google mal nach dieser Problemstellung sucht und auf diesen Forenbeitrag stößt, werde ich die Lösung der Vollständigkeit halber auch hier veröffentlichen:

Code:

<html>
	<head>
		<script type="text/javascript">
			function selectGroups(idname) {
				var groups = new Array();
				groups[0] = new Array(5, 6);				// C/SL65
				groups[1] = new Array(2, 3, 8, 9, 13, 15, 16);		// X65
				groups[2] = new Array(10, 14, 19, 20, 22);		// X75
				groups[3] = new Array(21, 23);				// E/EL71
				groups[4] = new Array(18);				// EF81
				groups[5] = new Array(11);				// SXG75

				var selectBox = document.getElementById(idname);
				var selectedGroup = new Array();
				
				// determine group
				for(i=0; i < selectBox.options.length; i++) {
					for (gi=0; gi < groups.length; gi++) { 
						if((selectBox.options[i].selected == true) && inArray(groups[gi], selectBox.options[i].value)){
							selectedGroup = groups[gi];
							break;
						}
					}
				}
				
				// set selected status
				for(i=0; i < selectBox.options.length; i++) {
					if (inArray(selectedGroup, selectBox.options[i].value)) {
						selectBox.options[i].selected = true;
					}
				}
				}
				
				function inArray(arrayName, valueName) {
					for(j=0; j<arrayName.length; j++) {
						if (arrayName[j] == valueName) {
							return true;
						}
					}
				}

		</script>
	</head>
	<body>
		<form name="settings" method="post">
			<select id="phoneselect" name="phone_id[]" size="8" multiple="multiple" onchange="selectGroups(this.id);">
				<option value="18">BenQ-Siemens EF81</option>
				<option value="11">Siemens SXG75</option>
				<option value="23">BenQ-Siemens E71</option>
				<option value="21">BenQ-Siemens EL71</option>
				<option value="20">BenQ-Siemens C81</option>
				<option value="22">BenQ-Siemens M81</option>
				<option value="19">BenQ-Siemens S68</option>
				<option value="10">Siemens S75</option>
				<option value="14">Siemens SL75</option>
				<option value="5">Siemens C65</option>
				<option value="6">Siemens SL65</option>
				<option value="16">Siemens C75</option>
				<option value="2">Siemens CX65</option>
				<option value="8">Siemens CX70</option>
				<option value="13">Siemens CX75</option>
				<option value="3">Siemens M65</option>
				<option value="9">Siemens M75</option>
				<option value="15">Siemens ME75</option>
				<option value="1">Siemens S65</option>
				<option value="4">Siemens SK65</option>
			</select>
			</form>
	</body>
</html>

Today