Dyn. Combobox mit Arrays

**frodod** · 15-06-2015, 20:23

Ich habe zwei dynamische Dropboxen ... und das funktioniert auch so wie es soll:

HTML-Code:

<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function Type(id, type){
this.id = id;
this.type = type;
}
function Style(id, id_type, style){
this.id = id;
this.id_type = id_type;
this.style = style;
}
TypeArray = new Array(
new Type(1, "HAUPTGRUPPE A"),
new Type(2, "HAUPTGRUPPE B"),
...

new Style(1, 1, "1.UNTERGRUPPE A"),
new Style(2, 1, "2.UNTERGRUPPE A"),
...

new Style(21, 2, "1.UNTERGRUPPE B"),
new Style(22, 2, "2.UNTERGRUPPE B")
...
);


function init(sel_type, sel_style){
document.product.id_type.options[0]	= new Option("HAUPTGRUPPE");
document.product.id_style.options[0] = new Option("UNTERGRUPPE");
for(i = 1; i <= TypeArray.length; i++){
document.product.id_type.options[i]	= new Option(TypeArray[i-1].type, TypeArray[i-1].id);
if(TypeArray[i-1].id == sel_type)
document.product.id_type.options[i].selected = true;
}
OnChange(sel_style);
}
function OnChange(sel_style){
sel_type_index = document.product.id_type.selectedIndex;
sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
for(i = document.product.id_style.length - 1; i > 0; i--)
document.product.id_style.options[i] = null;
j=1;
for(i = 1; i <= StyleArray.length; i++){
if(StyleArray[i-1].id_type == sel_type_value){
document.product.id_style.options[j] = new Option(StyleArray[i-1].style, StyleArray[i-1].id);
if(StyleArray[i-1].id == sel_style)	document.product.id_style.options[j].selected = true;
j++;
}
}
}

</script>
</head>

Die Auswahl erfolgt in einer Standard-form:

HTML-Code:

<body>

<form name="product" method="post" action="xy.php">

<select name="id_type" size="1" onChange="OnChange()"></select>

<select name="id_style" size="1"></select>

<input type="text" name="auswahl" value="">*

</form>


<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
init();
</SCRIPT>

</body>

Nun brauche ich aber den tatsächlichen, gleich "selected" value aus der select id_style, erhalte aber, wie ich es auch anstelle, nur die id des arrays ... oben habe ich, nur zu Testzwecken dafür die input type=text" rein gesetzt.
Alle Versuche wie ]document.forms.auswahl.value=... schlagen fehl. Die Weiterverarbeitung dieses id_style.values soll per PHP erfolgen. Wie krieg ich den gewählten (selected) Wert der UNTERGRUPPE und nicht nur die array-id raus?

**kkapsner** · 16-06-2015, 10:31

Zitat von frodod

Nun brauche ich aber den tatsächlichen, gleich "selected" value aus der select id_style, erhalte aber, wie ich es auch anstelle, nur die id des arrays ... oben habe ich, nur zu Testzwecken dafür die input type=text" rein gesetzt.

Ich weiß nicht, wie's den anderen geht, aber ich verstehe diesen Satz nicht... was meinst du mit "die id des arrays"?

Außerdem solltest du deinen Code mal sauber formatieren - macht das Lesen/Verstehen/Warten viel einfacher.

PS: das language-Attribut ist veraltet -> weg damit.
PPS: anstatt des Array-Konstruktors sollte man besser die Literalschreibweise verwenden: ist kürzer und konsistent.
PPPS: globale Variablen sind keine gute Idee.

**mikdoe** · 16-06-2015, 18:04

Hab das mal durch den Beautifier laufen lassen:

HTML-Code:

<head>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
        function Type(id, type) {
            this.id = id;
            this.type = type;
        }

        function Style(id, id_type, style) {
            this.id = id;
            this.id_type = id_type;
            this.style = style;
        }
        TypeArray = new Array(
            new Type(1, "HAUPTGRUPPE A"),
            new Type(2, "HAUPTGRUPPE B"),
            ...

            new Style(1, 1, "1.UNTERGRUPPE A"),
            new Style(2, 1, "2.UNTERGRUPPE A"),
            ...

            new Style(21, 2, "1.UNTERGRUPPE B"),
            new Style(22, 2, "2.UNTERGRUPPE B")
            ...
        );


        function init(sel_type, sel_style) {
            document.product.id_type.options[0] = new Option("HAUPTGRUPPE");
            document.product.id_style.options[0] = new Option("UNTERGRUPPE");
            for (i = 1; i <= TypeArray.length; i++) {
                document.product.id_type.options[i] = new Option(TypeArray[i - 1].type, TypeArray[i - 1].id);
                if (TypeArray[i - 1].id == sel_type)
                    document.product.id_type.options[i].selected = true;
            }
            OnChange(sel_style);
        }

        function OnChange(sel_style) {
            sel_type_index = document.product.id_type.selectedIndex;
            sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
            for (i = document.product.id_style.length - 1; i > 0; i--)
                document.product.id_style.options[i] = null;
            j = 1;
            for (i = 1; i <= StyleArray.length; i++) {
                if (StyleArray[i - 1].id_type == sel_type_value) {
                    document.product.id_style.options[j] = new Option(StyleArray[i - 1].style, StyleArray[i - 1].id);
                    if (StyleArray[i - 1].id == sel_style) document.product.id_style.options[j].selected = true;
                    j++;
                }
            }
        }
    </script>
</head>

Ist für meine Augen trotzdem noch etwas verknotet der Code.