florian88
Goto Top

Dynamische Abfrage bei einer Unterkategorie

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

<html>
<head>
<title>Artikel suche</title>
<script type="text/javascript"><!--  
// *** globale Variablen
var urls = new Array(
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", ""),  
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array("", "", "", "", ""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "")     
);
var beschriftung = new Array(
   new Array(""),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d"),  
   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"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d")  
);
// *** Ende der globalen Variablen
function kategorie_anzeigen(f) {
   var kategorie = f.kategorien.selectedIndex;
   f.unterpunkte.options.length = urls[kategorie].length;
   for (var i=0; i<urls[kategorie].length; i++) {
      f.unterpunkte.options[i].text =
         (beschriftung[kategorie])[i];
   }
}
function seite_laden(f){
   var kategorie = f.kategorien.selectedIndex;
   var unterpunkt = f.unterpunkte.selectedIndex;
}
//--></script>
</head>
<body>
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align>  
<h1>Artikel suchen:</h1>
<form>
<select name="kategorien"  
onchange="kategorie_anzeigen(this.form);">  
   <option>Bitte auswählen</option>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
   <option>7</option>
   <option>8</option>
   <option>9</option>
   <option>10</option>
   <option>11</option>
   <option>12</option>
   <option>13</option>
   <option>14</option>
   <option>15</option>
   <option>16</option>
   <option>17</option>
   <option>18</option>
   <option>19</option>
   <option>20</option>
   <option>21</option>
   <option>22</option>
   <option>23</option>
   <option>24</option>
</select>
<br />
<br />
<select name="unterpunkte"  
onchange="seite_laden(this.form);">  
   <option>Bitte auswählen</option>
</select>
</form>
</body>
</html>

Content-ID: 125679

Url: https://administrator.de/forum/dynamische-abfrage-bei-einer-unterkategorie-125679.html

Ausgedruckt am: 23.12.2024 um 23:12 Uhr

nxclass
nxclass 24.09.2009 um 11:31:51 Uhr
Goto Top
Tip: Array mit Objekten
var daten = new Array(
    {'url':'http://was/auch/immer', 'description':'Was auch immer'},  
// usw.
);

Tip: Javascript auslagern
js:
document.getElementByID('kategorien').onchange = function()  
{
    /* deine Funktion */
}
html:
<select id="kategorien" name ="kategorien"> 
<!-- ... -->
</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:
/**
 * Baut einen XML Knoten mit Attributen und Inhalten auf
 *
 * @param string sName          Name des XML Elements
 * @param object oAttributes    Liste mit Attributen für das Element
 * @param array aChildNodes     Liste mit Kindknoten bzw. Zeichenketten
 * @return node     der fertige Knoten
 */
function buildNode(sName, oAttributes, aChildNodes)
{
    // Knoten wird erstellt
    var nNode = document.createElement( sName );
    // Attribute gesetzt
    if (oAttributes) {
        for (var sKey in oAttributes) {
            nNode.setAttribute(sKey, oAttributes[sKey]);
        }
    }
    // Inhalte eingefügt
    if (aChildNodes) {
        for (var iKey in aChildNodes) {
            if (typeof(aChildNodes[iKey]) == 'object') {  
                nNode.appendChild( aChildNodes[iKey] );
            } else {
                nNode.appendChild( document.createTextNode( aChildNodes[iKey] ) );
            }
        }
    }
    //
    return nNode
}
Florian88
Florian88 24.09.2009 um 12:25:30 Uhr
Goto Top
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

<html>
<head>
<title>Artikel suche</title>
<script type="text/javascript"><!--  
// *** globale Variablen
var urls = new Array(
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", ""),  
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array("", "", "", "", ""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "")     
);
var beschriftung = new Array(
   new Array(""),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d"),  
   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"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d")  
);

var daten = new Array(
   new Array(""),  
   new Array("Laptop"),  
   new Array("VOIP-Telefon"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Digitalkamera"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"),  
   new Array("Headset"),  
   new Array("Digitalkamera"),  
   new Array("ThinClient", "ThinClient"),  
   new Array("Drucker"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"),  
   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"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubeh&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"),  
   new Array("Scanner", "Scanner"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker")  
);

// *** Ende der globalen Variablen
document.getElementByID('kategorien').onchange = function(){  
function kategorie_anzeigen(f) {
   var kategorie = f.Hersteller.selectedIndex;
   f.Modell.options.length = urls[kategorie].length;
   for (var i=0; i<urls[kategorie].length; i++) {
      f.Modell.options[i].text =
         (beschriftung[kategorie])[i];
   }
  }
 }

function seite_laden(f){
   var kategorie = f.kategorien.selectedIndex;
   var unterpunkt = f.unterpunkte.selectedIndex;
}
//--></script>
</head>
<body>
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align>  
<h1>Artikel suchen:</h1>
<form>
<select name="kategorien"  
onchange="kategorie_anzeigen(this.form);">  
   <option>Bitte auswählen</option>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
   <option>7</option>
   <option>8</option>
   <option>9</option>
   <option>10</option>
   <option>11</option>
   <option>12</option>
   <option>13</option>
   <option>14</option>
   <option>15</option>
   <option>16</option>
   <option>17</option>
   <option>18</option>
   <option>19</option>
   <option>20</option>
   <option>21</option>
   <option>22</option>
   <option>23</option>
   <option>24</option>
</select>
<br />
<br />
<select name="unterpunkte"  
onchange="seite_laden(this.form);">  
   <option>Bitte auswählen</option>
</select>
<br />
<br />
<select id="kategorien" name ="kategorien">  
<option>Bitte auswählen</option>
</select>
</form>
</body>
</html>
nxclass
nxclass 24.09.2009 um 21:00:53 Uhr
Goto Top
Das 'onchange' Event wird nun nicht mehr im HTML Code benötigt - allerdings eine 'id'
<select id="kategorien" name="kategorien">  
  <option value="">bitte wählen Sie eine Kategorie</option>  
  <option value="1">Kategorie1</option>  
<!-- usw. -->
</select>

Die Funktion wird nun direkt dem Event und dem HTML.Node zugeteilt
/**
 * Durchsucht das HTML Dokument nach einer ID und gibt den HTML Node zurück
 *
 * @param string sId	id des HTMl Elements
 * @return node
 */
function $(sId)
{
    return document.getElementById(sId);
}

/**
 * Diese Funktion wird aufgerufen sobald eine neue Option gewählt wird
 */
$('kategorien').onchange = function()  
{
    index = $('kategorien').attributes.value.value;  
    /* jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden */ 
} 

Beispiel zum erstellen eines 'option' Elements
/* In einer Schleife ... */
var value = 1;
var description = 'Unterpunkt';  
$('kategorien').appendChild( buildNode('option', {'value':value}, array(description)) );  
Florian88
Florian88 25.09.2009 um 10:57:00 Uhr
Goto Top
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

<html>
<head>
<title>Artikel suche</title>
<script type="text/javascript"><!--  
// *** globale Variablen
var urls = new Array(
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", ""),  
   new Array("", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""),  
   new Array(""),  
   new Array("", "", "", "", ""),  
   new Array("", ""),  
   new Array(""),  
   new Array(""),  
   new Array("", "", "", "")     
);
var beschriftung = new Array(
   new Array(""),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d"),  
   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"),  
   new Array("a"),  
   new Array("a", "b", "c", "d", "e"),  
   new Array("a", "b"),  
   new Array("a"),  
   new Array("a"),  
   new Array("a", "b", "c", "d")  
);

var daten = new Array(
   new Array(""),  
   new Array("Laptop"),  
   new Array("VOIP-Telefon"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Digitalkamera"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker", "Drucker"),  
   new Array("Headset"),  
   new Array("Digitalkamera"),  
   new Array("ThinClient", "ThinClient"),  
   new Array("Drucker"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"),  
   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"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Zubeh&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r", "Zubehl&ouml;r"),  
   new Array("Scanner", "Scanner"),  
   new Array("Modem-Router"),  
   new Array("Zubeh&ouml;r"),  
   new Array("Drucker", "Drucker", "Drucker", "Drucker")  
);
 
/*
* Durchsucht das HTML Dokument nach einer ID und gibt den HTML Node zurück
* @param string sId	id des HTMl Elements 
* @return node
*/

function $(sId){ 

return document.getElementById(sId);
}

/*
* Diese Funktion wird aufgerufen sobald eine neue Option gewählt wird 
*/ 

$('kategorien').onchange = function(){  

index = $('kategorien').attributes.value.value;  

// jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden  
} 

function seite_laden(f){
   var kategorie = f.kategorien.selectedIndex;
   var unterpunkt = f.unterpunkte.selectedIndex;
   var value = 1; 
   var description = 'Unterpunkt';   
   $('kategorien').appendChild( buildNode('option', {'value':value}, array(description)) );  
}

//--></script>

</head>
<body>
<align="center"></align><img src="header.jpg" align="center" alt="Header"></align>  
<h1>Artikel suchen:</h1>
<form>
<select id="kategorien" name="kategorien">  
   <option>Bitte auswählen</option>
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
   <option>7</option>
   <option>8</option>
   <option>9</option>
   <option>10</option>
   <option>11</option>
   <option>12</option>
   <option>13</option>
   <option>14</option>
   <option>15</option>
   <option>16</option>
   <option>17</option>
   <option>18</option>
   <option>19</option>
   <option>20</option>
   <option>21</option>
   <option>22</option>
   <option>23</option>
   <option>24</option>
</select>
<br />
<br />
<select name="unterpunkte"  
onchange="seite_laden(this.form);">  
   <option>Bitte auswählen</option>
</select>
<br />
<br />
<select id="kategorien" name ="kategorien">  
<option>Bitte auswählen</option>
</select>
</form>
</body>
</html>
nxclass
nxclass 25.09.2009 um 20:14:46 Uhr
Goto Top
richtig - wenn die Webseite geladen wird existiert $('kategorien') noch nicht ... packe das mal noch in ein window.onload = function() {}

/* ... */
window.onload = function() {
    $('kategorien').onchange = function() {  
        index = $('kategorien').attributes.value.value;   

// jetzt kann anhand von 'index' die 2. select box erstellt bzw. gefüllt werden 

    }  
}
/* ... */
bei dem Kommentar könntest Du erstmal ein 'alert(index)' zum Test einfügen.

bechte das deine Option-Tags richtig formatiert sind
<option value="1"> 1 </option>  
Florian88
Florian88 28.09.2009 um 10:34:57 Uhr
Goto Top
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
nxclass
nxclass 28.09.2009 um 13:43:31 Uhr
Goto Top
versuch das mal ...
index = $('kategorien').value;  
Florian88
Florian88 28.09.2009 um 13:48:48 Uhr
Goto Top
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
nxclass
nxclass 28.09.2009 um 21:27:18 Uhr
Goto Top
..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:
<html>
<head>
    <title></title>
    <script type="text/javascript" src="./test.js"></script>  
</head>
<body>

    <select id="main" name="main" disabled="disabled">  
        <option value="">bitte aktivieren Sie Javascript</option>  
    </select>
    
    <select id="sub" name="sub" disabled="disabled">  
        <option value="">bitte aktivieren Sie Javascript</option>  
    </select>

</body>
</html>

test.js
/**
 * Durchsucht das HTML Dokument nach einer ID und gibt das HTML Element zurück
 *
 * @param string sId	id des HTMl Elements
 * @return node
 */
function $(sId)
{
    return document.getElementById(sId);
}

/**
 * Baut einen XML Knoten mit Attributen auf
 *
 * @param string sName          Name des XML Elements
 * @param object oAttributes    Liste mit Attributen für das Element
 * @param array  aNodes         Liste mit Kind Knoten
 * @return node     der fertige Knoten
 */
function buildNode(sName, oAttributes, aNodes)
{
    var nNode = document.createElement( sName );
    
    if (oAttributes && typeof(oAttributes)=='object') {  
        for (sKey in oAttributes) {
            nNode.setAttribute(sKey, oAttributes[sKey]);
        }
    }
    
    if (aNodes && typeof(aNodes)=='object') {  
        for (iKey in aNodes) {
            if (typeof(aNodes[iKey])=='object') {  
                nNode.appendChild( aNodes[iKey] );
            } else {
                nNode.appendChild( document.createTextNode(aNodes[iKey]) );
            }
        }
    }
    
    return nNode
}

/**
 *
 */
function loadOptions(sId, aParrentId)
{
    $(sId).removeAttribute('disabled');  
    $(sId).innerHTML = '';  
    $(sId).appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) );  

    switch (sId) {
        case 'main':  
            for (iKey in aData[sId]) {
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][iKey])) );  
            }
            $(sId).onchange = function() {
                loadOptions('sub', new Array($(sId).value));  
            }
            break;
        case 'sub':  
            for (iKey in aData[sId][aParrentId[0]]) {
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][aParrentId[0]][iKey])) );  
            }
            $(sId).onchange = function() {
                // DEBUG
                alert( aLinks[aParrentId[0]][$(sId).value] );
            }            
            break;
    }
    
}

// -----------------------------------------------------------------------------

window.onload = function()
{
    loadOptions( 'main' );  
    $('sub').innerHTML = '';  
    $('sub').appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) );  
    
}

// -----------------------------------------------------------------------------

var aData = new Object();
aData['main'] = new Array( 'wert_1', 'wert_2', 'wert_3' );  
aData['sub'] = new Array(  
    new Array( 'wert_11', 'wert_12', 'wert_13' ),  
    new Array( 'wert_21', 'wert_22', 'wert_23' ),  
    new Array( 'wert_31', 'wert_32', 'wert_33' )  
);

var aLinks = new Array(
    new Array( 'url11', 'url12', 'url13' ),  
    new Array( 'url21', 'url22', 'url23' ),  
    new Array( 'url31', 'url32', 'url33' )  
);

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)
Florian88
Florian88 28.09.2009 um 22:18:10 Uhr
Goto Top
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:

function loadOptions(sId, aParrentId)
{
    $(sId).removeAttribute('disabled');  
    $(sId).innerHTML = '';  
    $(sId).appendChild( buildNode('option', {'value':''}, new Array('-bitte wählen-')) );  

    switch (sId) {
        case 'main':  
            for (iKey in aData[sId]) {
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][iKey])) );  
            }
            $(sId).onchange = function() {
                loadOptions('sub', new Array($(sId).value));  
            }
            break;
        case 'sub':  
            for (iKey in aData[sId][aParrentId[0]]) {
                $(sId).appendChild( buildNode('option', {'value':iKey}, new Array(aData[sId][aParrentId[0]][iKey])) );  
            }
            $(sId).onchange = function() {
                // DEBUG
                alert( aLinks[aParrentId[0]][$(sId).value] );
            }            
            break;
    }
    
}
nxclass
nxclass 29.09.2009 um 08:43:04 Uhr
Goto Top
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.
Florian88
Florian88 07.10.2009 um 17:12:12 Uhr
Goto Top
Vielen Dank für die Antworten.

Habe nun ein fuktionierendes Script geschrieben.

Gruß

Florian