Gå til innhold

Usynlig til synlig

kjey

Anbefalte innlegg

kjey

kjey

Skrevet
Skrevet (endret)

Hei,

 

Jeg lurer litt på hvordan jeg kan få en dropdown-meny fra å være usynlig til å bli synlig hvis man klikker på et spesielt valg. La meg forklare gjennom et eksempel:

 

Jeg har en drop-down meny som denne:

<select name="grønt">
<option value="0" selected>-- Velg --</option>
<option value="frukt">Frukt</option>
<option value="grønnsaker">Grønnsaker</option>
</select>

Når siden lades opp skal kun den dropdown-menyen over vises, men hvis hvis du velger grønnsaker skal f.eks denne komme fram rett under:

<select name="grønnsaker">
<option value="agurk" selected>Agurk</option>
<option value="kål">Kål</option>
</select>

Og når man velger frukt kommer denne frem rett under:

<select name="frukt">
<option value="appelsin" selected>Appelsin</option>
<option value="eple">Eple</option>
</select>

Altså skal det være en usynlig dropdown-meny rett under den øverste koden som ikke vises før man klikker på et av alternativene. Vært av alternativene vil da bestemme hva som skal stå i dropdown-menyen som dukker opp.

 

Hvis noen vet hvordan dette gjøres takker jeg med et stort smil :D

Endret av kjey
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
NH

NH

Skrevet
Skrevet (endret)

dette kan vel hjelpe?

 

<!-- I <head> -->

<script language="javascript">

var lastElementId = 0;
function viewNhide(elementId){

var element = document.getElementById(elementId).style;

if(lastElementId != 0 && lastElementId != elementId){
 viewNhide(lastElementId);	
}

if(element.display == "block"){
 element.display = "none";	
} else {
 element.display = "block";	
}

lastElementId = elementId;
}

</script>


<!-- dropdownen -->
<form>
<select name="grønt" id="gront" onchange="viewNhide(this.value)">
<option value="0" selected>-- Velg --</option>
<option value="frukt">Frukt</option>
<option value="gronnsaker">Grønnsaker</option>
</select>


<select name="grønnsaker" id="gronnsaker" style="display:none">
<option value="agurk" selected>Agurk</option>
<option value="kål">Kål</option>
</select>


<select name="frukt" id="frukt" style="display:none">
<option value="appelsin" selected>Appelsin</option>
<option value="eple">Eple</option>
</select>
</FORM>

 

merk:

her har jeg valgt å bruke value i første formen som ID på de andre formene

Endret av NH
Lenke til kommentar
  • 1 år senere...
Bozzeye

Bozzeye

Skrevet
Skrevet (endret)

Eg og treng sånn dropdown, men eg får det ikkje til. Når eg velgjer noko i den andre dropdownen går den ikkje til ei side, korleis kan eg få den til å gjere det?

Slik ser det ut i bodyen:

 

<form>
<select name="Konsoll" id="konsoll" onchange="viewNhide(this.value)">
<option value="0" selected>-- Velg konsoll --</option>
<option value="wii">Nintendo Wii</option>
<option value="ds">Nintendo DS</option>
<option value="pc">PC</option>
</select>


<select name="Wii" id="wii" style="display:none">
<option value="0" selected>-- Velg spel --</option>
<option value="eitspel.html">Eit spel</option>
</select>


<select name="DS" id="ds" style="display:none">
<option value="0" selected>-- Velg spel --</option>
<option value="eitspel.html">Eit anna spel</option>
</select>


<select name="PC" id="pc" style="display:none">
<option value="0" selected>-- Velg spel --</option>
<option value="trespel.html">Eit tredje spel</option>
</select>
</form>

 

Og slik i headen:

 

<script type="text/javascript">

var lastElementId = 0;
function viewNhide(elementId){

var element = document.getElementById(elementId).style;

if(lastElementId != 0 && lastElementId != elementId){
viewNhide(lastElementId); 
}

if(element.display == "block"){
element.display = "none"; 
} else {
element.display = "block"; 
}

lastElementId = elementId;
}

</script>

 

Og ja, eg veit at tråden er over eit år gamal.

 

Edit: Eg fann det ut, treng ikkje hjelp lenger. :)

Endret av Mr. Sviker
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...