Onchange i select felt

Tjah, tjoh ...

-- det _lyder_ som om, du bare kan have de forskellige select-bokse i elementer, du skjuler og/eller viser, men det kan jo godt være, at det er helt anderledes ...

altså hvis option 1 bliver valgt kommer der 1 select box neden under... hvis 2 kommer der en anden... 3 en helt tredie... hvis du kan følge mig :) De er unikke alle sammen

men kun 1 box kommer frem... den vælges bare alt efter hvad man vælger i den første

Jeg prøvede med noget ala det her... men virker ikke da den ikke sender værdien ved update

<select name="type" class="form" onchange="document.location.href='<?php echo "$PHP_SELF?type=$_POST[type]"; ?>'">
<option value="0">Choose</option>
<option value="Rogue" <?php if($type == "Rogue") { echo "selected"; } ?>>Rogue</option>
<option value="Mage" <?php if($type == "Mage") { echo "selected"; } ?>>Mage</option>
<option value="Warlock" <?php if($type == "Warlock") { echo "selected"; } ?>>Warlock</option>
<option value="Priest" <?php if($type == "Priest") { echo "selected"; } ?>>Priest</option>
<option value="Warrior" <?php if($type == "Warrior") { echo "selected"; } ?>>Warrior</option>
<option value="Shaman" <?php if($type == "Shaman") { echo "selected"; } ?>>Shaman</option>
<option value="Druid" <?php if($type == "Druid") { echo "selected"; } ?>>Druid</option>
<option value="Paladin" <?php if($type == "Paladin") { echo "selected"; } ?>>Paladin</option>
<option value="Hunter" <?php if($type == "Hunter") { echo "selected"; } ?>>Hunter</option>
</select>

-- jeg har stadig ikke forstået, hvad det er, der skal dukke op, hvis man vælger den ene eller den anden, men da du nu viser rollespils-figurer, kunne jeg gætte på, at det var de forskellige typers egenskaber, der skulle vises efter valg ...

-- et gæt kunne ligne:

<select name="type" class="form" onchange="document.getElementById(this.value).style.display='block';">
<option>Choose</option>
<option value="Rogue">Rogue</option>
<option value="Mage">Mage</option>
<option value="Warlock">Warlock</option>
<option value="Priest">Priest</option>
<option value="Warrior">Warrior</option>
<option value="Shaman">Shaman</option>
<option value="Druid">Druid</option>
<option value="Paladin">Paladin</option>
<option value="Hunter">Hunter</option>
</select>

<div id="Rogue">
  <!-- De elementer, der skal bruges, når det er en Rogue-figur -->
</div>
<div id="Mage">
  <!-- De elementer, der skal bruges, når det er en Mage-figur -->
</div>

osv.

Ja det ser rigtigt ud men den viser begge div's med det samme...

Ja, de skulle selvfølgelig have været skjult fra starten:

<div id="Rogue" style="display:none;>

-- men der er vel også noget med at hvis man vælger om, så skal det tidligere valg skjules:

<script type="text/javascript">
var oldType = null;
functon showType(elmId){
  if(oldType)
    oldType.display = "none";
  if(elmId){
    oldType = document.getElementById(elmId).style;
    oldType.display = "block";
  }
}
</script>

<select name="type" class="form" onchange="showType(this.value);">

Øv, en lille tavetosse:

<div id="Rogue" style="display:none;">

<script type="text/javascript">
var oldType = null;
functon showType(elmId){
  if(oldType)
    oldType.display = "none";
  if(elmId){
    oldType = document.getElementById(elmId).style;
    oldType.display = "block";
  }
}
</script>

<select name="type" class="form" onchange="showType(this.value);">
<option value="0">Choose</option>
<option value="Rogue">Rogue</option>
<option value="Mage">Mage</option>
<option value="Warlock">Warlock</option>
<option value="Priest">Priest</option>
<option value="Warrior">Warrior</option>
<option value="Shaman">Shaman</option>
<option value="Druid">Druid</option>
<option value="Paladin">Paladin</option>
<option value="Hunter">Hunter</option>
</select>
<br><br>
<div id="Rogue" style="display:none;">
lælal
</div>
<div id="Mage" style="display:none;">
  test
</div>

Kan sq ikke helt få det til af dutte... :S

funcon skal være function, og så skal alle andre end Rogue og Mage jo også oprettes som div'er.

<script type="text/javascript">
var oldType = null;
function showType(elmId){
  if(oldType)
    oldType.style.display = "none";
  if(elmId){
    oldType = document.getElementById(elmId);
    oldType.style.display = "block";
  }
}
</script>

<select name="type" class="form" onchange="showType(this.value);">
<option value="0">Choose</option>
<option value="Rogue">Rogue</option>
<option value="Mage">Mage</option>
<option value="Warlock">Warlock</option>
<option value="Priest">Priest</option>
<option value="Warrior">Warrior</option>
<option value="Shaman">Shaman</option>
<option value="Druid">Druid</option>
<option value="Paladin">Paladin</option>
<option value="Hunter">Hunter</option>
</select>

<br><br>

<div id="Rogue" style="display:none">
  lælal
</div>
<div id="Mage" style="display:none">
  test
</div>

ah der var den :) roenving svar tak... ja tak begge 2 hehe :)

Hov... mindre problem i måske kan løse...

<div id="Priest" style="display:none;">
<select name="spec" class="form">
<option value="Holy">Holy</option>
<option value="Rogue">Disc</option>
<option value="Mage">Shadow</option>
</select>
</div>
<div id="Warrior" style="display:none;">
<select name="spec" class="form">
<option value="Protection">Protection</option>
<option value="Fury">Fury</option>
<option value="Arms">Arms</option>
</select>
</div>

Hvis jeg nu har valgt Priest så ender $spec stadig med at blave den value i den nederste select... altså Protection

Hvad? Du bør vel heller ikke have 2 selects, der begge har name="spec".

Du må give dine selects forskellige navne. Det vil løse problemet.

Ellers kan du vel lave optgroups i selecten, så det er disse, der bliver skjult/vist.

okay

Tjah, eller disable de ubrugte:

<div id="Priest" style="display:none;">
<select name="spec" class="form" disabled="disabled">
<option value="Holy">Holy</option>
<option value="Rogue">Disc</option>
<option value="Mage">Shadow</option>
</select>
</div>
<div id="Warrior" style="display:none;" disabled="disabled">
<select name="spec" class="form">
<option value="Protection">Protection</option>
<option value="Fury">Fury</option>
<option value="Arms">Arms</option>
</select>
</div>

<script type="text/javascript">
var oldType = null;
function showType(elmId){
  if(oldType){
    oldType.style.display = "none";
    oldType.getElementsByTagName("select")[0].setAttribute("disabled","disabled");
  }
  if(elmId){
    oldType = document.getElementById(elmId);
    oldType.style.display = "block";
    oldType.getElementsByTagName("select")[0].removeAttribute("disabled");
  }
}
</script>

Velbekomme '-)

disabled på div'en?

-- øeh, hvilken div bliver disabled, såvidt jeg kan se på koden er det select-elementer, der disables ...

-- og tak for point ;~}

Da vel ikke her, eller hvad:

<div id="Warrior" style="display:none;" disabled="disabled">

-- arh, en tavetosse i ny og næ kan vel forekomme, eller måske nærmere en copy/paste-fejl ...

-- og jeg fokuserer jo som vanligt på js-koden, selv klokken lort om morgenen !-)

-- men selvfølgelig giver det ingen mening at disable et div !o]