Inhalt eines Listboxes ändern, jenachdem welcher Radiobutton man angeklickt hat

[messmar]

Hallo,

ich habe lange gegoolt, und in im Netz geschaut, aber Ich wurde leider nicht fundig ;-(

Folgendes:

Ich habe ein Formular mit drei Radiobuttons, und einem Listenbox:

<form name="angebote">

<input type="radio" name="p1" value="Shop">E-Shop
<input type="radio" onclick="wahl02()" name="p1" value="Kultur">Städte
<input type="radio" name="p1" value="fest">Hotels


<select name="p2" size="1" style="width: 200;">
<option value='leer' selected> Bitte Wählen Sie:
<option value='01bab'> Serie01</option>
<option value='02tis'> Serie02</option>
<option value='03lam'> Serie03</option>
<option value='04sit'> Serie04</option>
<option value='05gla'> Serie05</option>
<option value='06vas'> Serie06</option>
<option value='07tel'> Serie07</option>
<option value='leer'>______________ </option>
</select>

</form>

Ich will mit javascript erreichen, dass jenachdem was der User für ein Radiobutton checkt bzw. anklickt, der Inhalt des Listenboxes sich ändert. Ich meine hier die Liste in das Listenbox, die ich danach halt für Datenbank verwenden will.

Mein Javascript-Code sieht so aus (Ich beschränke mich bei der Abfrage zunächst, nur auf einen Radiobutton. Da ich den Prinzip erstmal hinbekommen will, und dann der Rest wäre einfach):

function wahl02()
{
if (document.angebote.p1[0].checked)
{
//Die neue Liste
txt_1 = new Array("K 75",
"K 75 C",
"K 75 S",
"K 75 RT",
"K 100",
"K 100 LT"
);
count = angebote.p2.length;
alert(count); //nur zum debuging
document.angebote.p2.options = txt_1;

}

}

Für eine Lösung, bin ich sehr Dankbar ;-)

Gruß

 

[Sven Mintel]

Du musst per new Option() neue Option-Objekte erzeugen, welche du dann in die Liste einhängst:

<script type="text/javascript">
<!--

arrOptions = [];

arrOptions['Shop'] =
[
['leer','Bitte wählen Sie'],
['s1','Shop#1'],
['s2','Shop#2'],
['s3','Shop#3'],
['leer','______________']
];

arrOptions['Kultur']=
[
['leer','Bitte wählen Sie'],
['k1','Städte#1'],
['k2','Städte#2'],
['k3','Städte#3'],
['leer','______________']
];

arrOptions['fest']=
[
['leer','Bitte wählen Sie'],
['f1','Hotels#1'],
['f2','Hotels#2'],
['f3','Hotels#3'],
['leer','______________']
];



function wahl(objButton)
{
objList = objButton.form.p2;
objList.options.length = 0;
for(j = 0; j < arrOptions[objButton.value].length; ++j)
    {
    objList.options[j] =
                        new Option(
                                    arrOptions[objButton.value][j][1],
                                    arrOptions[objButton.value][j][0]
                                  );
    }
objList.options[0].selected = true;
}
//-->
</script>

Der Aufbau von arrOptions ist...

arrOptions['valueDesButtons']=
[
['value von Option1','Text von Option1'],
['value von Option2','Text von Option2'],
['value von Option3','Text von Option3']
//uswusf
];

der Aufruf erfolgt im Button per onclick="wahl(this)"