ich wollte eine Verkettete Auswahlliste ihr einfügen i-wie klappt das nicht
Code wo ich es einbinden will
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!--@title=Downloads@--><!--@hmenu=Anleitungen@--><!--@view=normal@--><!--@viewoptions=@--><!--@wysiwyg=1@--><style>a:hover { color:#09C; text-decoration:underline; }</style><?phpdefined ('main') or die ('no direct access');if(loggedin()) {echo 'DU BIST ANGEMELDET';} else {echo '<font color="#00FF00"><font size="2"><div style="margin-left:16%;display-inline;"><br><br><br><br><br><br><font color="#ccc"> <font size="3"><strong><div style="margin-left:28%;display-inline;">Anleitungen</div></strong></font></font><br>Die Anleitungen sind nur für Registrierte Benutzer gedacht.<br><br>Bitte registrieren sie sich um die Anleitungen sehen zu können.<br><br>Oder loggen sie sich mit ihrem Benutzername und Passwort ein.</div></font></font> <br>}?> |
Verkettete Auswahlliste
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Beispiel 1</title> <script type="text/javascript" src="terminAuswahl.js"></script><script type="text/javascript" src="LinkedSelection.js"></script><script type="text/javascript"> /** * Diese Callback-Funktion soll beim Abschliessen der Auswahlstrecke und beim * Ändern der Auswahl in einer der Auswahllisten aufgerufen werden. * @param selected ein Array mit den Daten der jeweiligen Auswahllisten * (leer, wenn Strecke nicht abgeschlossen) **/function ergebnisZeigen( selected ){ if( selected.length ) { /* * Auswahlstrecke wurde beendet */ // Visualisierung der Auswahlsrecke var sel = ''; var val = ''; var txt = ''; for( var i = 0; i < selected.length; i++ ) { sel += ( i>0 ? ' ' : '') + selected[i].id; val += ( i>0 ? ' ' : '') + selected[i].value; txt += ( i>0 ? ' ' : '') + selected[i].text; } var output = '<h4>Info:<'+'/h4><p>' + val + '<'+'/p>'; } else { /* * Auswahlstrecke wurde noch nicht beendet */ // Hinweis zur Auswahl in der nächsten Auswahlliste var output = '<p>Wählen Sie eine Option aus der nächste Auswahlliste.<'+'/p>'; } var ergebnisObj = document.getElementById( 'ergebnis' ).innerHTML = output;}; window.onload = function(){ var vk = new LinkedSelection( [ 'professor', 'lesung', 'termin' ], ergebnisZeigen, terminAuswahl );} var terminAuswahl = { 'professor' : { 'p23' : ['', 'Albers, Alfred'], 'p24' : ['p24', 'Braun, Berta'], 'p25' : ['p25', 'Drachenzaun, Doris'], 'p26' : ['p26', 'Müller, Stephan'], 'p27' : ['p27', 'Meier, Manfred'] }, 'lesung' : { ' ' : [ ['sdsdsddsdsdsdddsd', 'OS X Lion'], ['l56', 'OS Snow Leopard'], ['l56', 'IOS Jailbreak'] ], 'p24' : [ ['l65', 'Linux'], ], 'p25' : [ ['l75', 'Windows 95'], ['l76', 'Windows 98'], ['l77', 'Windows ME'], ['l78', 'Windows NT'], ['l79', 'Windows 2000'], ['l80', 'Windows 2003'], ['l81', 'Windows XP'], ['l82', 'Windows Vista'], ['l83', 'Windows 7'], ['l84', 'Windows 8'] ], },};/** * LinkedSelection ist ein Klasse zur Steuerung dynamisch verketteter Auswahllisten * @param inputSelects ein Array mit den IDs der Auswahllisten in hierarchischer Reihenfolge * Bsp: [ 'select1', 'select2', 'select3' ] * @param callback Funktion, welche beim Abschließen (und Ändern) der Auswahl aufgerufen werden soll * @param data das Daten-Objekt in JSON * Bsp: { 'select1':['wert1','text1'], 'select2':['wert5','text5'] } **/function LinkedSelection( inputSelects, callback, data ){ var self = this; /* um aus EventHandlern auf diese Instanz zugreifen zu können */ var selects = new Array(); /* Liste der verketteten Auswahllisten */ /** * Die Funktion changeHandler wird dem onchange-Handler jeder Auswahlliste zugewiesen. * Wenn eine gültige Auswahl getroffen wurde, soll entweder die als nächste * Auswahlliste (nextSelect) bekannte Auswahlliste mit Daten befüllt werden, * oder die Callback-Funktion ausgeführt werden. **/ var changeHandler = function() { var value = this.selectedValue(); // Auf die nächste Auswahlliste folgende Auswahllisten müssen wieder // in den default-Zustand versetzt werden if( typeof(this.nextSelect) == 'object' ) { for( var i = this.nextSelect.selectID + 1; i < selects.length; i++ ) selects[i].replaceOptions( new Array() ); } // Abbrechen, wenn ein Dummy-Wert ausgewählt wurde if( value == '--' ) { if( this.selectID < selects.length ) selects[ this.selectID +1 ].replaceOptions( new Array() ); return; } if( typeof(this.nextSelect) == 'object' ) { /* * nextSelect ist eine Auswahlliste */ // Wenn keine Daten zur gemachten Auswahl zur Verfügung stehen, // müssen wir sicherstellen, dass wir auf keine nicht vorhandenen Objekte zugreifen. if( !data[ this.nextSelect.id ][ value ] ) { if( !data[ this.nextSelect.id ] ) data[ this.nextSelect.id ] = {}; data[ this.nextSelect.id ][ value ] = new Array(); } // Neue Optionen in der nächsten Auswahlliste setzen this.nextSelect.replaceOptions( data[ this.nextSelect.id ][ value ] ); // Wenn die Auswahlstrecke nicht beendet ist, muss die Callback-Funktion // dennoch aufgerufen werden, damit entsprechend auf Änderungen // reagiert werden kann. callback( new Array() ); } else { /* * Die Auswahlstrecke ist absolviert */ // Wahlen der einzelnen Listen in ein Array schreiben um // dieses an die Callback-Funktion zu übergeben. var selected = new Array(); for( var i = 0; i < selects.length; i++ ) { selected.push( { 'id' : selects[i].id, 'value': selects[i].selectedValue(), 'text' : selects[i].selectedText() } ); } callback( selected ); } }; /** * replaceOptions ersetzt die aktuellen Optionen der Auswahlliste durch * die im Array newOptions gelieferten Daten. Wenn ein leeres Array übergeben * wird, wird die default-Option "--" gesetzt. * @param newOptions ein Array mit den neuen Optionen * Bsp: [ ['value1','text1'], ['value2','text2'], ] **/ var replaceOptions = function( newOptions ) { /* * Diese Funktion setzt bewusst DOM-Methoden ein und verzichtet * auf die vom Options-Objekt gegebenen Möglichkeiten. */ // alte Optionen der Auswahlliste löschen var opts = this.getElementsByTagName( 'option' ); while( opts.length > 0 ) this.removeChild( opts[0] ); // wenn keine neuen Optionen übergeben wurden, default-Option setzen // andernfalls "Bitte wählen" voranstellen if( newOptions.length == 0) this.addOption( '--', '------' ); else this.addOption( '--', 'Bitte wählen:' ); // neue Optionen in die Auswahlliste schreiben for( var i = 0; i < newOptions.length; i++ ) this.addOption( newOptions[i][0], newOptions[i][1] ); }; /* * Fügt der Auswahlliste eine neue Option hinzu * @param value Wert der neuen Option * @param text Name der neuen Option */ var addOption = function( value, text ) { var opt = document.createElement( 'option' ); opt.value = value; opt.appendChild( document.createTextNode( text ) ); this.appendChild( opt ); }; /** * holt den Wert der aktuell gewählten Option * @returns den Value der aktuell gewählten Option **/ var selectedValue = function() { return this.options[ this.selectedIndex ].value; }; /** * holt den Text (Name) der aktuell gewählten Option * @returns den Text der aktuell gewählten Option **/ var selectedText = function() { return this.options[ this.selectedIndex ].text; }; /** * Selektiere die Option mit dem Wert value, wenn keine Option mit dem Wert * value existiert, wird die Auswahl nicht geändert. * @param value der Wert den eine Option haben muss, um ausgewählt zu werden. **/ var selectByValue = function( value ) { for( var i = 0; i < this.options.length; i++ ) { if( this.options[i].value == value ) this.selectedIndex = i; } } /** * Initialisiere den Manager für verkettete Auswahllisten. * Findet Auswahllisten anhand der (per inputSelects) bekannten IDs. * Bestückt die Auswahllisten mit den nötigen Funktionen und Event-Handlern **/ this.init = function() { // bestücke bestehende selects for( var i = 0; i < inputSelects.length; i++ ) { var t = document.getElementById( inputSelects[i] ); // ignoriere falsche IDs if(!t) continue; // neue Funktionen und Event-Handler zuweisen und in selects registrieren t.replaceOptions = replaceOptions; t.addOption = addOption; t.selectedValue = selectedValue; t.selectedText = selectedText; t.selectByValue = selectByValue; t.selectID = selects.length; t.onchange = changeHandler; selects.push( t ); // registriere Auswahlliste als nextSelect bei der vorhergehenden if( selects.length > 1 ) selects[ selects.length-2 ].nextSelect = t; } }; // initialisieren! this.init();}</script> </head><body> <h1>Beispiel 1</h1> <p>Bitte wählen Sie in der folgenden Auswahlliste eine Betriebssytem</p> <p><label id="professorLabel" for="professor">Hersteller</label><select id="professor"> <option value="--">Hersteller wählen:</option> <option value=" ">Apple</option> <option value="p24">Linux</option> <option value="p25">Windows</option></select> <label id="lesungLabel" for="lesung">Betriebssystem:</label><select id="lesung"> <option value="--">------</option></select> </p> <div id="ergebnis"></div> </body></html> |
