Dropdown-Listen in HTML mit JavaScript steuern

**CaptainAlphabet** · 27-11-2003, 17: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/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>

**Jana** · 27-11-2003, 19: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

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>

**sixfriends** · 27-11-2003, 21:41

@Jana: Ist das dein Ernst?

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

sixfriends

**sixfriends** · 27-11-2003, 21:45

@Jana: Fast vergessen: Erklär mir mal, wie du das mit php machen willst

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** · 27-11-2003, 23:01

Danke! Das funktioniert seht gut!

**Jana** · 28-11-2003, 21: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, 12:42

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">
<!--
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>

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>

**sixfriends** · 29-11-2003, 15:50

Ich glaub nicht wirklich, dass das so ohne weiteres geht

Vielleicht über Frames. Aber das wird recht kompliziert werden glaub ich. Da kann ich dir nicht weiterhelfen.

sixfriends

**Jana** · 29-11-2003, 18:13

Also ehrlich ich bin Pazifist und kein Liebhaber von Kriegsspielen!

**offe** · 29-11-2003, 22: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

Thema: Dropdown-Listen in HTML mit JavaScript steuern

Themen-Optionen

Thema bewerten

Anzeige

Dropdown-Listen in HTML mit JavaScript steuern

Lesezeichen

Lesezeichen

Berechtigungen