Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit
GELÖST

Dynamische Abfrage bei einer Unterkategorie

Frage Entwicklung Java

Mitglied: Florian88

Florian88 (Level 1) - Jetzt verbinden

24.09.2009 um 09:59 Uhr, 4016 Aufrufe, 12 Kommentare

Hallo zusammen,

ich habe mir ein kleines Script geschrieben, dass eine dynamische Drop Down Liste erstellt (Kategorie), die wiederum eine weitere Liste erstellt (Unterkategorie).

Soweit so gut!

Nun möchte ich eine weitere Abfrage mit dynamischer Ausgabe erstellen.

Und zwar möchte ich gerne die Unterkategorie abfragen, ob es z.B. ein Zubehör, Drucker, etc. und entsprechend den Wert anzeigen lassen auf der Seite (Unterkategorie2).

Als Anlage habe ich den gesamten Quellcode eingefügt, ich hoffe, damit helfen zu können.

Mit freundlichen Gruß

Florian

01.
<html> 
02.
<head> 
03.
<title>Artikel suche</title> 
04.
<script type="text/javascript"><!-- 
05.
// *** globale Variablen 
06.
var urls = new Array( 
07.
   new Array(""), 
08.
   new Array(""), 
09.
   new Array(""), 
10.
   new Array("", "", "", "", "", ""), 
11.
   new Array(""), 
12.
   new Array(""), 
13.
   new Array(""), 
14.
   new Array(""), 
15.
   new Array(""), 
16.
   new Array("", "", "", "", "", "", "", "", "", "", ""), 
17.
   new Array(""), 
18.
   new Array(""), 
19.
   new Array("", ""), 
20.
   new Array(""), 
21.
   new Array(""), 
22.
   new Array(""), 
23.
   new Array(""), 
24.
   new Array("", "", "", ""), 
25.
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""), 
26.
   new Array(""), 
27.
   new Array("", "", "", "", ""), 
28.
   new Array("", ""), 
29.
   new Array(""), 
30.
   new Array(""), 
31.
   new Array("", "", "", "")    
32.
); 
33.
var beschriftung = new Array( 
34.
   new Array(""), 
35.
   new Array("a"), 
36.
   new Array("a"), 
37.
   new Array("a", "b", "c", "d", "e", "f"), 
38.
   new Array("a"), 
39.
   new Array("a"), 
40.
   new Array("a"), 
41.
   new Array("a"), 
42.
   new Array("a"), 
43.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"), 
44.
   new Array("a"), 
45.
   new Array("a"), 
46.
   new Array("a", "b"), 
47.
   new Array("a"), 
48.
   new Array("a"), 
49.
   new Array("a"), 
50.
   new Array("a"), 
51.
   new Array("a", "b", "c", "d"), 
52.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z", "aa", "ab", "ac", "ad", "ae", "af", "ag", "ah"), 
53.
   new Array("a"), 
54.
   new Array("a", "b", "c", "d", "e"), 
55.
   new Array("a", "b"), 
56.
   new Array("a"), 
57.
   new Array("a"), 
58.
   new Array("a", "b", "c", "d") 
59.
); 
60.
// *** Ende der globalen Variablen 
61.
function kategorie_anzeigen(f) { 
62.
   var kategorie = f.kategorien.selectedIndex; 
63.
   f.unterpunkte.options.length = urls[kategorie].length; 
64.
   for (var i=0; i<urls[kategorie].length; i++) { 
65.
      f.unterpunkte.options[i].text = 
66.
         (beschriftung[kategorie])[i]; 
67.
68.
69.
function seite_laden(f){ 
70.
   var kategorie = f.kategorien.selectedIndex; 
71.
   var unterpunkt = f.unterpunkte.selectedIndex; 
72.
73.
//--></script> 
74.
</head> 
75.
<body> 
76.
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align> 
77.
<h1>Artikel suchen:</h1> 
78.
<form> 
79.
<select name="kategorien" 
80.
onchange="kategorie_anzeigen(this.form);"> 
81.
   <option>Bitte auswählen</option> 
82.
   <option>1</option> 
83.
   <option>2</option> 
84.
   <option>3</option> 
85.
   <option>4</option> 
86.
   <option>5</option> 
87.
   <option>6</option> 
88.
   <option>7</option> 
89.
   <option>8</option> 
90.
   <option>9</option> 
91.
   <option>10</option> 
92.
   <option>11</option> 
93.
   <option>12</option> 
94.
   <option>13</option> 
95.
   <option>14</option> 
96.
   <option>15</option> 
97.
   <option>16</option> 
98.
   <option>17</option> 
99.
   <option>18</option> 
100.
   <option>19</option> 
101.
   <option>20</option> 
102.
   <option>21</option> 
103.
   <option>22</option> 
104.
   <option>23</option> 
105.
   <option>24</option> 
106.
</select> 
107.
<br /> 
108.
<br /> 
109.
<select name="unterpunkte" 
110.
onchange="seite_laden(this.form);"> 
111.
   <option>Bitte auswählen</option> 
112.
</select> 
113.
</form> 
114.
</body> 
115.
</html>
Mitglied: nxclass
24.09.2009 um 11:31 Uhr
Tip: Array mit Objekten
01.
var daten = new Array( 
02.
    {'url':'http://was/auch/immer', 'description':'Was auch immer'}, 
03.
// usw. 
04.
);
Tip: Javascript auslagern
js:
01.
document.getElementByID('kategorien').onchange = function() 
02.
03.
    /* deine Funktion */ 
04.
}
html:
01.
<select id="kategorien" name ="kategorien"> 
02.
<!-- ... --> 
03.
</select>
---

Mit dem node Objekt kannst Du deinem SELECT tag weitere OPTION tags hinzufügen. ( http://de.selfhtml.org/javascript/objekte/node.htm#append_child )

---
evtl. kannst Du was mit dieser Funktion anfangen:
01.
/** 
02.
 * Baut einen XML Knoten mit Attributen und Inhalten auf 
03.
04.
 * @param string sName          Name des XML Elements 
05.
 * @param object oAttributes    Liste mit Attributen für das Element 
06.
 * @param array aChildNodes     Liste mit Kindknoten bzw. Zeichenketten 
07.
 * @return node     der fertige Knoten 
08.
 */ 
09.
function buildNode(sName, oAttributes, aChildNodes) 
10.
11.
    // Knoten wird erstellt 
12.
    var nNode = document.createElement( sName ); 
13.
    // Attribute gesetzt 
14.
    if (oAttributes) { 
15.
        for (var sKey in oAttributes) { 
16.
            nNode.setAttribute(sKey, oAttributes[sKey]); 
17.
18.
19.
    // Inhalte eingefügt 
20.
    if (aChildNodes) { 
21.
        for (var iKey in aChildNodes) { 
22.
            if (typeof(aChildNodes[iKey]) == 'object') { 
23.
                nNode.appendChild( aChildNodes[iKey] ); 
24.
            } else { 
25.
                nNode.appendChild( document.createTextNode( aChildNodes[iKey] ) ); 
26.
27.
28.
29.
    // 
30.
    return nNode 
31.
}
Bitte warten ..
Mitglied: Florian88
24.09.2009 um 12:25 Uhr
Hallo,

vielen Dank für die schnelle Antwort.

Ich habe die Funktionen eingebaut, aber ich bekomme eine Fehlermeldung.

In Zeile 112 wird ein Objekt erwartet. Habe ich einen logischen Fehler eingebaut?

Hier noch einmal der erweiterte Quellcode.

Nochmals vielen Dank.

Gruß

Florian

Anlage: Quellcode

01.
<html> 
02.
<head> 
03.
<title>Artikel suche</title> 
04.
<script type="text/javascript"><!-- 
05.
// *** globale Variablen 
06.
var urls = new Array( 
07.
   new Array(""), 
08.
   new Array(""), 
09.
   new Array(""), 
10.
   new Array("", "", "", "", "", ""), 
11.
   new Array(""), 
12.
   new Array(""), 
13.
   new Array(""), 
14.
   new Array(""), 
15.
   new Array(""), 
16.
   new Array("", "", "", "", "", "", "", "", "", "", ""), 
17.
   new Array(""), 
18.
   new Array(""), 
19.
   new Array("", ""), 
20.
   new Array(""), 
21.
   new Array(""), 
22.
   new Array(""), 
23.
   new Array(""), 
24.
   new Array("", "", "", ""), 
25.
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""), 
26.
   new Array(""), 
27.
   new Array("", "", "", "", ""), 
28.
   new Array("", ""), 
29.
   new Array(""), 
30.
   new Array(""), 
31.
   new Array("", "", "", "")    
32.
); 
33.
var beschriftung = new Array( 
34.
   new Array(""), 
35.
   new Array("a"), 
36.
   new Array("a"), 
37.
   new Array("a", "b", "c", "d", "e", "f"), 
38.
   new Array("a"), 
39.
   new Array("a"), 
40.
   new Array("a"), 
41.
   new Array("a"), 
42.
   new Array("a"), 
43.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"), 
44.
   new Array("a"), 
45.
   new Array("a"), 
46.
   new Array("a", "b"), 
47.
   new Array("a"), 
48.
   new Array("a"), 
49.
   new Array("a"), 
50.
   new Array("a"), 
51.
   new Array("a", "b", "c", "d"), 
52.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z", "aa", "ab", "ac", "ad", "ae", "af", "ag", "ah"), 
53.
   new Array("a"), 
54.
   new Array("a", "b", "c", "d", "e"), 
55.
   new Array("a", "b"), 
56.
   new Array("a"), 
57.
   new Array("a"), 
58.
   new Array("a", "b", "c", "d") 
59.
); 
60.
 
61.
var daten = new Array( 
62.
   new Array(""), 
63.
   new Array("Laptop"), 
64.
   new Array("VOIP-Telefon"), 
65.
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"), 
66.
   new Array("Modem-Router"), 
67.
   new Array("Zubeh&ouml;r"), 
68.
   new Array("Modem-Router"), 
69.
   new Array("Zubeh&ouml;r"), 
70.
   new Array("Digitalkamera"), 
71.
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"), 
72.
   new Array("Headset"), 
73.
   new Array("Digitalkamera"), 
74.
   new Array("ThinClient", "ThinClient"), 
75.
   new Array("Drucker"), 
76.
   new Array("Modem-Router"), 
77.
   new Array("Zubeh&ouml;r"), 
78.
   new Array("Zubeh&ouml;r"), 
79.
   new Array("Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"), 
80.
   new Array("Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "PC", "PC", "PC", "PC", "PC", "PC", "Monitor", "Monitor", "Monitor", "Monitor", "Monitor", "Zubeh&ouml;r", "Zubeh&ouml;r", "Drucker", "Drucker", "Drucker", "Drucker", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r"), 
81.
   new Array("Zubeh&ouml;r"), 
82.
   new Array("Zubeh&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"), 
83.
   new Array("Scanner", "Scanner"), 
84.
   new Array("Modem-Router"), 
85.
   new Array("Zubeh&ouml;r"), 
86.
   new Array("Drucker", "Drucker", "Drucker", "Drucker") 
87.
); 
88.
 
89.
// *** Ende der globalen Variablen 
90.
document.getElementByID('kategorien').onchange = function(){ 
91.
function kategorie_anzeigen(f) { 
92.
   var kategorie = f.Hersteller.selectedIndex; 
93.
   f.Modell.options.length = urls[kategorie].length; 
94.
   for (var i=0; i<urls[kategorie].length; i++) { 
95.
      f.Modell.options[i].text = 
96.
         (beschriftung[kategorie])[i]; 
97.
98.
99.
100.
 
101.
function seite_laden(f){ 
102.
   var kategorie = f.kategorien.selectedIndex; 
103.
   var unterpunkt = f.unterpunkte.selectedIndex; 
104.
105.
//--></script> 
106.
</head> 
107.
<body> 
108.
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align> 
109.
<h1>Artikel suchen:</h1> 
110.
<form> 
111.
<select name="kategorien" 
112.
onchange="kategorie_anzeigen(this.form);"> 
113.
   <option>Bitte auswählen</option> 
114.
   <option>1</option> 
115.
   <option>2</option> 
116.
   <option>3</option> 
117.
   <option>4</option> 
118.
   <option>5</option> 
119.
   <option>6</option> 
120.
   <option>7</option> 
121.
   <option>8</option> 
122.
   <option>9</option> 
123.
   <option>10</option> 
124.
   <option>11</option> 
125.
   <option>12</option> 
126.
   <option>13</option> 
127.
   <option>14</option> 
128.
   <option>15</option> 
129.
   <option>16</option> 
130.
   <option>17</option> 
131.
   <option>18</option> 
132.
   <option>19</option> 
133.
   <option>20</option> 
134.
   <option>21</option> 
135.
   <option>22</option> 
136.
   <option>23</option> 
137.
   <option>24</option> 
138.
</select> 
139.
<br /> 
140.
<br /> 
141.
<select name="unterpunkte" 
142.
onchange="seite_laden(this.form);"> 
143.
   <option>Bitte auswählen</option> 
144.
</select> 
145.
<br /> 
146.
<br /> 
147.
<select id="kategorien" name ="kategorien"> 
148.
<option>Bitte auswählen</option> 
149.
</select> 
150.
</form> 
151.
</body> 
152.
</html>
Bitte warten ..
Mitglied: nxclass
24.09.2009 um 21:00 Uhr
Das 'onchange' Event wird nun nicht mehr im HTML Code benötigt - allerdings eine 'id'
01.
<select id="kategorien" name="kategorien"> 
02.
  <option value="">bitte wählen Sie eine Kategorie</option> 
03.
  <option value="1">Kategorie1</option> 
04.
<!-- usw. --> 
05.
</select>
Die Funktion wird nun direkt dem Event und dem HTML.Node zugeteilt
01.
/** 
02.
 * Durchsucht das HTML Dokument nach einer ID und gibt den HTML Node zurück 
03.
04.
 * @param string sId	id des HTMl Elements 
05.
 * @return node 
06.
 */ 
07.
function $(sId) 
08.
09.
    return document.getElementById(sId); 
10.
11.
 
12.
/** 
13.
 * Diese Funktion wird aufgerufen sobald eine neue Option gewählt wird 
14.
 */ 
15.
$('kategorien').onchange = function() 
16.
17.
    index = $('kategorien').attributes.value.value; 
18.
    /* jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden */ 
19.
} 
Beispiel zum erstellen eines 'option' Elements
01.
/* In einer Schleife ... */ 
02.
var value = 1; 
03.
var description = 'Unterpunkt'; 
04.
$('kategorien').appendChild( buildNode('option', {'value':value}, array(description)) );
Bitte warten ..
Mitglied: Florian88
25.09.2009 um 10:57 Uhr
Hallo nxclass,

vielen vielen Dank für die promte Antwort.

Ich habe keine großen Erfahrungen bezgl. JavaScript und muss daher noch einmal den Quellcode posten. Habe ich die Funktionen richtig eingebaut?

Leider bekomme ich weiterhin eine Fehlermeldung: Zeile 104 'null' ist null oder kein Objekt.

Anbei der bearbeitete Quellcode.

Könnten Sie mir vielleicht den gesamten Quellcode posten.

Vielen Dank noch einmal.

Gruß

Florian

01.
<html> 
02.
<head> 
03.
<title>Artikel suche</title> 
04.
<script type="text/javascript"><!-- 
05.
// *** globale Variablen 
06.
var urls = new Array( 
07.
   new Array(""), 
08.
   new Array(""), 
09.
   new Array(""), 
10.
   new Array("", "", "", "", "", ""), 
11.
   new Array(""), 
12.
   new Array(""), 
13.
   new Array(""), 
14.
   new Array(""), 
15.
   new Array(""), 
16.
   new Array("", "", "", "", "", "", "", "", "", "", ""), 
17.
   new Array(""), 
18.
   new Array(""), 
19.
   new Array("", ""), 
20.
   new Array(""), 
21.
   new Array(""), 
22.
   new Array(""), 
23.
   new Array(""), 
24.
   new Array("", "", "", ""), 
25.
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""), 
26.
   new Array(""), 
27.
   new Array("", "", "", "", ""), 
28.
   new Array("", ""), 
29.
   new Array(""), 
30.
   new Array(""), 
31.
   new Array("", "", "", "")    
32.
); 
33.
var beschriftung = new Array( 
34.
   new Array(""), 
35.
   new Array("a"), 
36.
   new Array("a"), 
37.
   new Array("a", "b", "c", "d", "e", "f"), 
38.
   new Array("a"), 
39.
   new Array("a"), 
40.
   new Array("a"), 
41.
   new Array("a"), 
42.
   new Array("a"), 
43.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"), 
44.
   new Array("a"), 
45.
   new Array("a"), 
46.
   new Array("a", "b"), 
47.
   new Array("a"), 
48.
   new Array("a"), 
49.
   new Array("a"), 
50.
   new Array("a"), 
51.
   new Array("a", "b", "c", "d"), 
52.
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "v", "w", "x", "y", "z", "aa", "ab", "ac", "ad", "ae", "af", "ag", "ah"), 
53.
   new Array("a"), 
54.
   new Array("a", "b", "c", "d", "e"), 
55.
   new Array("a", "b"), 
56.
   new Array("a"), 
57.
   new Array("a"), 
58.
   new Array("a", "b", "c", "d") 
59.
); 
60.
 
61.
var daten = new Array( 
62.
   new Array(""), 
63.
   new Array("Laptop"), 
64.
   new Array("VOIP-Telefon"), 
65.
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"), 
66.
   new Array("Modem-Router"), 
67.
   new Array("Zubeh&ouml;r"), 
68.
   new Array("Modem-Router"), 
69.
   new Array("Zubeh&ouml;r"), 
70.
   new Array("Digitalkamera"), 
71.
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"), 
72.
   new Array("Headset"), 
73.
   new Array("Digitalkamera"), 
74.
   new Array("ThinClient", "ThinClient"), 
75.
   new Array("Drucker"), 
76.
   new Array("Modem-Router"), 
77.
   new Array("Zubeh&ouml;r"), 
78.
   new Array("Zubeh&ouml;r"), 
79.
   new Array("Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"), 
80.
   new Array("Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Laptop", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "PC", "PC", "PC", "PC", "PC", "PC", "Monitor", "Monitor", "Monitor", "Monitor", "Monitor", "Zubeh&ouml;r", "Zubeh&ouml;r", "Drucker", "Drucker", "Drucker", "Drucker", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r", "Zubeh&ouml;r"), 
81.
   new Array("Zubeh&ouml;r"), 
82.
   new Array("Zubeh&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"), 
83.
   new Array("Scanner", "Scanner"), 
84.
   new Array("Modem-Router"), 
85.
   new Array("Zubeh&ouml;r"), 
86.
   new Array("Drucker", "Drucker", "Drucker", "Drucker") 
87.
); 
88.
  
89.
/* 
90.
* Durchsucht das HTML Dokument nach einer ID und gibt den HTML Node zurück 
91.
* @param string sId	id des HTMl Elements  
92.
* @return node 
93.
*/ 
94.
 
95.
function $(sId){  
96.
 
97.
return document.getElementById(sId); 
98.
99.
 
100.
/* 
101.
* Diese Funktion wird aufgerufen sobald eine neue Option gewählt wird  
102.
*/  
103.
 
104.
$('kategorien').onchange = function(){ 
105.
 
106.
index = $('kategorien').attributes.value.value; 
107.
 
108.
// jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden  
109.
}  
110.
 
111.
function seite_laden(f){ 
112.
   var kategorie = f.kategorien.selectedIndex; 
113.
   var unterpunkt = f.unterpunkte.selectedIndex; 
114.
   var value = 1;  
115.
   var description = 'Unterpunkt';  
116.
   $('kategorien').appendChild( buildNode('option', {'value':value}, array(description)) ); 
117.
118.
 
119.
//--></script> 
120.
 
121.
</head> 
122.
<body> 
123.
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align> 
124.
<h1>Artikel suchen:</h1> 
125.
<form> 
126.
<select id="kategorien" name="kategorien"> 
127.
   <option>Bitte auswählen</option> 
128.
   <option>1</option> 
129.
   <option>2</option> 
130.
   <option>3</option> 
131.
   <option>4</option> 
132.
   <option>5</option> 
133.
   <option>6</option> 
134.
   <option>7</option> 
135.
   <option>8</option> 
136.
   <option>9</option> 
137.
   <option>10</option> 
138.
   <option>11</option> 
139.
   <option>12</option> 
140.
   <option>13</option> 
141.
   <option>14</option> 
142.
   <option>15</option> 
143.
   <option>16</option> 
144.
   <option>17</option> 
145.
   <option>18</option> 
146.
   <option>19</option> 
147.
   <option>20</option> 
148.
   <option>21</option> 
149.
   <option>22</option> 
150.
   <option>23</option> 
151.
   <option>24</option> 
152.
</select> 
153.
<br /> 
154.
<br /> 
155.
<select name="unterpunkte" 
156.
onchange="seite_laden(this.form);"> 
157.
   <option>Bitte auswählen</option> 
158.
</select> 
159.
<br /> 
160.
<br /> 
161.
<select id="kategorien" name ="kategorien"> 
162.
<option>Bitte auswählen</option> 
163.
</select> 
164.
</form> 
165.
</body> 
166.
</html>
Bitte warten ..
Mitglied: nxclass
25.09.2009 um 20:14 Uhr
richtig - wenn die Webseite geladen wird existiert $('kategorien') noch nicht ... packe das mal noch in ein window.onload = function() {}

01.
/* ... */ 
02.
window.onload = function() { 
03.
    $('kategorien').onchange = function() { 
04.
        index = $('kategorien').attributes.value.value;  
05.
 
06.
// jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden 
07.
 
08.
    }   
09.
10.
/* ... */
bei dem Kommentar könntest Du erstmal ein 'alert(index)' zum Test einfügen.

bechte das deine Option-Tags richtig formatiert sind
01.
<option value="1"> 1 </option>
Bitte warten ..
Mitglied: Florian88
28.09.2009 um 10:34 Uhr
Hallo nxclass,

vielen Dank für die schnelle Antwort.

Ich erhalte in Zeile 117 folgende Fehlermeldung: ".attributes.value.value ist Null oder kein Objekt".

Ich habe alle Options - Tags sowie oben genannt formatiert.

Gruß

Florian
Bitte warten ..
Mitglied: nxclass
28.09.2009 um 13:43 Uhr
versuch das mal ...
01.
index = $('kategorien').value;
Bitte warten ..
Mitglied: Florian88
28.09.2009 um 13:48 Uhr
Ich erhalte nun keine Fehlermeldung aber ich kann nur die erste Kategorie auswählen, danach sind keine weiteren Auswahlmöglichkeiten außer das da immer "Auswählen" steht.

Gruß

Florian
Bitte warten ..
Mitglied: nxclass
28.09.2009 um 21:27 Uhr
..nun kommt der Part an dem die 'option' tags eingefügt werden müssen.
---
schau Dir mal das Beispiel an - es besteht aus 2 Dateien
test.html:
01.
<html> 
02.
<head> 
03.
    <title></title> 
04.
    <script type="text/javascript" src="./test.js"></script> 
05.
</head> 
06.
<body> 
07.
 
08.
    <select id="main" name="main" disabled="disabled"> 
09.
        <option value="">bitte aktivieren Sie Javascript</option> 
10.
    </select> 
11.
     
12.
    <select id="sub" name="sub" disabled="disabled"> 
13.
        <option value="">bitte aktivieren Sie Javascript</option> 
14.
    </select> 
15.
 
16.
</body> 
17.
</html>
test.js
01.
/** 
02.
 * Durchsucht das HTML Dokument nach einer ID und gibt das HTML Element zurück 
03.
04.
 * @param string sId	id des HTMl Elements 
05.
 * @return node 
06.
 */ 
07.
function $(sId) 
08.
09.
    return document.getElementById(sId); 
10.
11.
 
12.
/** 
13.
 * Baut einen XML Knoten mit Attributen auf 
14.
15.
 * @param string sName          Name des XML Elements 
16.
 * @param object oAttributes    Liste mit Attributen für das Element 
17.
 * @param array  aNodes         Liste mit Kind Knoten 
18.
 * @return node     der fertige Knoten 
19.
 */ 
20.
function buildNode(sName, oAttributes, aNodes) 
21.
22.
    var nNode = document.createElement( sName ); 
23.
     
24.
    if (oAttributes && typeof(oAttributes)=='object') { 
25.
        for (sKey in oAttributes) { 
26.
            nNode.setAttribute(sKey, oAttributes[sKey]); 
27.
28.
29.
     
30.
    if (aNodes && typeof(aNodes)=='object') { 
31.
        for (iKey in aNodes) { 
32.
            if (typeof(aNodes[iKey])=='object') { 
33.
                nNode.appendChild( aNodes[iKey] ); 
34.
            } else { 
35.
                nNode.appendChild( document.createTextNode(aNodes[iKey]) ); 
36.
37.
38.
39.
     
40.
    return nNode 
41.
42.
 
43.
/** 
44.
45.
 */ 
46.
function loadOptions(sId, aParrentId) 
47.
48.
    $(sId).removeAttribute('disabled'); 
49.
    $(sId).innerHTML = ''; 
50.
    $(sId).appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) ); 
51.
 
52.
    switch (sId) { 
53.
        case 'main': 
54.
            for (iKey in aData[sId]) { 
55.
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][iKey])) ); 
56.
57.
            $(sId).onchange = function() { 
58.
                loadOptions('sub', new Array($(sId).value)); 
59.
60.
            break; 
61.
        case 'sub': 
62.
            for (iKey in aData[sId][aParrentId[0]]) { 
63.
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][aParrentId[0]][iKey])) ); 
64.
65.
            $(sId).onchange = function() { 
66.
                // DEBUG 
67.
                alert( aLinks[aParrentId[0]][$(sId).value] ); 
68.
            }             
69.
            break; 
70.
71.
     
72.
73.
 
74.
// ----------------------------------------------------------------------------- 
75.
 
76.
window.onload = function() 
77.
78.
    loadOptions( 'main' ); 
79.
    $('sub').innerHTML = ''; 
80.
    $('sub').appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) ); 
81.
     
82.
83.
 
84.
// ----------------------------------------------------------------------------- 
85.
 
86.
var aData = new Object(); 
87.
aData['main'] = new Array( 'wert_1', 'wert_2', 'wert_3' ); 
88.
aData['sub'] = new Array( 
89.
    new Array( 'wert_11', 'wert_12', 'wert_13' ), 
90.
    new Array( 'wert_21', 'wert_22', 'wert_23' ), 
91.
    new Array( 'wert_31', 'wert_32', 'wert_33' ) 
92.
); 
93.
 
94.
var aLinks = new Array( 
95.
    new Array( 'url11', 'url12', 'url13' ), 
96.
    new Array( 'url21', 'url22', 'url23' ), 
97.
    new Array( 'url31', 'url32', 'url33' ) 
98.
);
das Beispiel ist noch nicht ganz Bug frei, sollte dir allerdings Zeigen wie man es machen könnte.
In der Regel kommen die Daten für die Auswahlfelder nicht aus einem JS Array, sondern werden von einem Server seitigen Script nachgeladen. (AJAX & PHP)
Bitte warten ..
Mitglied: Florian88
28.09.2009 um 22:18 Uhr
Nabend nxclass,

die Script ist gut, sowas habe ich gesucht.

Kann man den alert Tag in einen option Tag umbauen?

Möchte später vielleicht die Felder vom Array dynamisch füllen. Ist dies überhaupt möglich?

Vielen Dank im Voraus.

Gruß

Florian

Anlage:

01.
function loadOptions(sId, aParrentId) 
02.
03.
    $(sId).removeAttribute('disabled'); 
04.
    $(sId).innerHTML = ''; 
05.
    $(sId).appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) ); 
06.
 
07.
    switch (sId) { 
08.
        case 'main': 
09.
            for (iKey in aData[sId]) { 
10.
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][iKey])) ); 
11.
12.
            $(sId).onchange = function() { 
13.
                loadOptions('sub', new Array($(sId).value)); 
14.
15.
            break; 
16.
        case 'sub': 
17.
            for (iKey in aData[sId][aParrentId[0]]) { 
18.
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][aParrentId[0]][iKey])) ); 
19.
20.
            $(sId).onchange = function() { 
21.
                // DEBUG 
22.
                alert( aLinks[aParrentId[0]][$(sId).value] ); 
23.
            }             
24.
            break; 
25.
26.
     
27.
}
Bitte warten ..
Mitglied: nxclass
29.09.2009 um 08:43 Uhr
Kann man den alert Tag in einen option Tag umbauen?
was meinst Du damit ? - der alert() Befehl ist nur eine Debug Ausgabe. Wenn Du noch ein weiteres Select Feld füllen willst müsste dann an dieser Stelle eine weiterer loadOptions() Befehl eingefügt werden ...

Möchte später vielleicht die Felder vom Array dynamisch füllen. Ist dies überhaupt möglich?
Die option -Felder nachzuladen ist auf jeden Fall sinnvoll. (Aber nicht wieder über ein Array - das ist der Horror)
Wie in meinem letzten POST geschieben, solltest Du dich mal mit AJAX und PHP beschäftigen.
Bitte warten ..
Mitglied: Florian88
07.10.2009 um 17:12 Uhr
Vielen Dank für die Antworten.

Habe nun ein fuktionierendes Script geschrieben.

Gruß

Florian
Bitte warten ..
Neuester Wissensbeitrag
Windows 10

Powershell 5 BSOD

(8)

Tipp von agowa338 zum Thema Windows 10 ...

Ähnliche Inhalte
C und C++
gelöst IF Abfrage funktioniert nicht mehr (2)

Frage von pablovic zum Thema C und C ...

Datenbanken
gelöst SQL-Abfrage - DISTINCT - letztes Datum (3)

Frage von emeriks zum Thema Datenbanken ...

Datenbanken
gelöst Row Number bei einer Abfrage sinnvoll einsetzen (1)

Frage von Aximand zum Thema Datenbanken ...

Heiß diskutierte Inhalte
Windows Tools
gelöst Aussendienst Datensynchronisierung (12)

Frage von lighningcrow zum Thema Windows Tools ...

Windows Server
Suche passender Treiber (12)

Frage von stolli zum Thema Windows Server ...

Peripheriegeräte
Wlan stört Funkmaus (11)

Frage von Falaffel zum Thema Peripheriegeräte ...

Peripheriegeräte
gelöst USB Festplatte verliert Laufwerksbuchstabe (9)

Frage von cese4321 zum Thema Peripheriegeräte ...