PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Dropdown-Listen in HTML mit JavaScript steuern


CaptainAlphabet
27-11-2003, 18:16
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/DieGefaehrlichen/Temp/Beispiel.jpg



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



<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>
Jana
27-11-2003, 20:40
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


<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>
sixfriends
27-11-2003, 22:41
@Jana: Ist das dein Ernst? :eek: Da sträuben sich mir ja die Nackenhaare.

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

<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
sixfriends
27-11-2003, 22:45
@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. ;)
CaptainAlphabet
28-11-2003, 00:01
Danke! Das funktioniert seht gut! :)
Jana
28-11-2003, 22:10
Hallo sixfriends. Scheint wohl, daß du besser verstanden hast was er machen will.

Ich hatte da etwas ganz anderes im Sinn.
CaptainAlphabet
29-11-2003, 13:42
Den momentanen Stand der Seite seht ihr hier (http://ochilan.homeunix.net/DieGefaehrlichen/Temp/ReadMe.html). 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.



<script type="text/javascript">
<!--
function change() {
document.getElementsByName("WeaponMods")[0].value="[AGP_Inventory.Weapon_AK74SU_Rifle]"
+"\nCurrentIndex=0"
+"\nSlot_0_(0)="+document.Selection.Slot_0.value
+"\nSlot_1_(0)="+document.Selection.Slot_1.value
+"\nSlot_2_(0)="+document.Selection.Slot_2.value
+"\nSlot_3_(0)="+document.Selection.Slot_3.value
+"\nSlot_4_(0)="+document.Selection.Slot_4.value
+"\nSlot_5_(0)="+document.Selection.Slot_5.value;
}
//-->
</script>



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



<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>
sixfriends
29-11-2003, 16:50
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
Jana
29-11-2003, 19:13
Also ehrlich ich bin Pazifist und kein Liebhaber von Kriegsspielen! :(
offe
29-11-2003, 23:05
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