Sep 24, 2009

4700

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>

Please also mark the comments that contributed to the solution of the article

Content-Key: 125679

Url: https://administrator.de/contentid/125679

Printed on: April 25, 2024 at 20:04 o'clock

12 Comments

Latest comment

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
}

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>

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)) );  

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>

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>  

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

versuch das mal ...

index = $('kategorien').value;

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

..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)

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;
    }
    
}

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.

Vielen Dank für die Antworten.

Habe nun ein fuktionierendes Script geschrieben.

Gruß

Florian

German solved Question Java Development

Hotly discussed

Check of ZFW Firewallgleixnerd - 5 Comments