Dropdown-Listen in HTML mit JavaScript steuern

Druckbare Version

27-11-2003, 17:16
CaptainAlphabet

Dropdown-Listen in HTML mit JavaScript steuern

Ich habe eine HTML-Seite erstellt, die ein Textfeld und einige Dropdown-Listen enthält. Wie ihr unten seht, ist dem Attribut onChange noch keine Funktion zugewiesen. Wie bringe ich die Dropdown-Listen dazu, ihre Values jeweils hinter Slot_0=, Slot_1= und Slot_2= zu schreiben, wenn man die Auswahl verändert?

http://ochilan.homeunix.net/DieGefae...p/Beispiel.jpg

Code:

<textarea rows="3" width="400" style="width:400px;"> Slot_0=Auswahl_1 Slot_1=Auswahl_1 Slot_2=Auswahl_1 </textarea>

Code:

<form> <select name="Slot 1" width="200" size="1" onChange=""> <option value="Auswahl_1">Auswahl 1</option> <option value="Auswahl_2">Auswahl 2</option> <option value="Auswahl_3">Auswahl 3</option> </select> <select name="Slot 2" width="200" size="1" onChange=""> <option value="Auswahl_1">Auswahl 1</option> <option value="Auswahl_2">Auswahl 2</option> <option value="Auswahl_3">Auswahl 3</option> </select> <select name="Slot 3" width="200" size="1" onChange=""> <option value="Auswahl_1">Auswahl 1</option> <option value="Auswahl_2">Auswahl 2</option> <option value="Auswahl_3">Auswahl 3</option> </select> </form>
27-11-2003, 19:40
Jana

Ohne PHP wird es kritisch! Nicht zu empfehlen.
Ich habe mal folgenden Code geschrieben. Er funktioniert aber ausschließlich im IE.
js_Dateien bei: http://www.cross-browser.com

Code:

<html> <head> <style> #layer {position:absolute; width:600px; height:60px; left: 100px; top: 150px; z-index:20; } </style> <script type="text/javascript" src="cbe/cbe_core.js"></script> <script type="text/javascript" src="cbe/cbe_event.js"></script> <script type="text/javascript" src="cbe/cbe_util.js"></script> <script type="text/javascript" src="cbe/cbe_slide.js"></script> <script type="text/javascript" src="cbe/cbe_slide2.js"></script> <script> function Add(i,one,two) { var cod = document.cbe.createElement("DIV"); if (cod) { cod.id = 'COD'; document.cbe.appendChild(cod); with(cod.cbe) { color('#ffffff'); background('#666666'); resizeTo(600,30); moveTo(100,180+i*30); show(); innerHtml( ''+ one + ''+ two); } } } </script> </head> <body> <div id="layer"><b>Street</b> <b>Building</b></div> <br> <script>var number = 0;</script> <form onsubmit="add(+number++,' '+this.street.value,this.building.value); return false;"> <table> <tr> <td>Street</td><td><input type ="text" name='street' size=20></td> <td>Building</td><td> <input type ="text" name='building' size=20></td> </tr> <tr><td> </td></tr> <tr><td> </td><td><input type ="submit" value = "Add"> </td></tr> </form> </body> </html>
27-11-2003, 21:41
sixfriends

@Jana: Ist das dein Ernst? :eek: Da sträuben sich mir ja die Nackenhaare.

Wie wär es damit:
Vor dem ganzen Zeug ein

Code:

<script language="JavaScript"> function change() { document.getElementsByName("area")[0].value = "Slot_0=" + document.myform.Slot_1.value + "\nSlot_1=" + document.myform.Slot_2.value + "\nSlot_2=" + document.myform.Slot_3.value; } </script>

Jetzt nur noch ändern:
<textarea name="area" rows=...
<form name="myform"> und
...onChange="change()"> bei allen dreien
ausserdem "Slot i" (i=1..3) ändern in "Slot_i".
Läuft auf jeden Fall schon mal unter IE6 und Mozilla 1.5, mehr als du von deinem Riesenscript sagen kannst, Jana :p

sixfriends
27-11-2003, 21:45
sixfriends

@Jana: Fast vergessen: Erklär mir mal, wie du das mit php machen willst :confused:
Da php Serverseitig abgearbeitet wird, müsste man da doch die Seite bei jeder Änderung neu laden lassen, wobei javascript das ganze clientseitig ohne neuladen hinbekommt --> Imho: Mit PHP wird es kritisch! Nicht zu empfehlen. ;)
27-11-2003, 23:01
CaptainAlphabet

Danke! Das funktioniert seht gut! :)
28-11-2003, 21:10
Jana

Hallo sixfriends. Scheint wohl, daß du besser verstanden hast was er machen will.

Ich hatte da etwas ganz anderes im Sinn.
29-11-2003, 12:42
CaptainAlphabet

Den momentanen Stand der Seite seht ihr hier. Dabei handelt es sich um die ReadMe zu meinem Weapon Selection Script für den Ego Shooter America's Army.

Könnt ihr mir auch beim nächsten Schritt helfen? Einige Auswahlmöglichkeiten sollen sich nämlich gegenseitig ausschließen:
- Wenn Slot_0 auf PSO oder Compact Aimpoint gesetzt wird, soll Slot_1 auf Virtual Heatshield gesetzt werden.
- Wenn Slot_1 auf Kobra Reflex gesetzt wird, soll Slot_0 auf AKS74U Ironsight und Slot_4 auf Virtual Heatshield gesetzt werden.
- Wenn Slot_4 auf BS1 Grenade gesetzt wird, soll Slot_1 auf Virtual Heatshield gesetzt werden.

Code:

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

Code:

<textarea name="WeaponMods" rows="8" width="400" style="width:400px;"> [AGP_Inventory.Weapon_AK74SU_Rifle] CurrentIndex=0 Slot_0_(0)=AGP_Inventory.WeaponMod_AKS74U_Ironsight Slot_1_(0)=AGP_Inventory.WeaponMod_Virtual_HeatShield Slot_2_(0)=AGP_Inventory.WeaponMod_Virtual_HeatShield Slot_3_(0)=AGP_Inventory.WeaponMod_Virtual_HeatShield Slot_4_(0)=AGP_Inventory.WeaponMod_Virtual_HeatShield Slot_5_(0)=AGP_Inventory.WeaponMod_Cone_Suppressor </textarea>

Code:

<form name="Selection"> Top Rail <select name="Slot_0" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_AKS74U_Ironsight">AKS74U Ironsight</option> <option value="AGP_Inventory.WeaponMod_PSO">PSO</option> <option value="AGP_Inventory.WeaponMod_Compact_AimPoint">Compact Aimpoint</option> </select><br> Front Rail <select name="Slot_1" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_Virtual_HeatShield">Virtual Heatshield</option> <option value="AGP_Inventory.WeaponMod_Kobra_Reflex">Kobra Reflex</option> </select><br> Left Rail <select name="Slot_2" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_Virtual_HeatShield">Virtual Heatshield</option> </select><br> Right Rail <select name="Slot_3" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_Virtual_HeatShield">Virtual Heatshield</option> </select><br> Bottom Rail <select name="Slot_4" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_Virtual_HeatShield">Virtual Heatshield</option> <option value="AGP_Inventory.WeaponMod_BS1_Gren">BS1 Grenade</option> </select><br> Barrel <select name="Slot_5" width="200" size="1" onChange="change()"> <option value="AGP_Inventory.WeaponMod_Cone_Suppressor">None</option> <option value="AGP_Inventory.WeaponMod_PBS4_Suppressor">PBS4 Suppressor</option> </select>
29-11-2003, 15:50
sixfriends

Ich glaub nicht wirklich, dass das so ohne weiteres geht :confused:
Vielleicht über Frames. Aber das wird recht kompliziert werden glaub ich. Da kann ich dir nicht weiterhelfen.

sixfriends
29-11-2003, 18:13
Jana

Also ehrlich ich bin Pazifist und kein Liebhaber von Kriegsspielen! :(
29-11-2003, 22:05
offe

Hi,

bin auch kein Liebhaber von Kriegsspielen!

müßte mit:
<select name="Slot_0" width="200" size="1" onChange="change1()">
function change1() {
if(document.Selection.Slot_0.selectedIndex == 1 || document.Selection.Slot_0.selectedIndex == 2){
document.Selection.Slot_1.selectedIndex = 0;
}
change();
}

gehen.

Offe