Avatar billede diff Nybegynder
27. oktober 2004 - 22:40 Der er 7 kommentarer og
1 løsning

funktion til visning af div udfra form select options

Jeg skal bruge en funktion til visning af en givet div blok udfra hvilken option der vælges i et form select input. Div blokkene er navngivet således at de har samme navn som værdien af den tilknyttet option.

Her er psedokoden, hvor jeg har forsøget at gøre det  javascript venligt.

shiwHide(options, selectedIndex) {
  for(int i=o; i<options.lenght; i++) {
      if(i == selectedIndex) {
          dixBox = document.getElementById(options[i].value);
          divBox.style.display = 'block';
      } else {
          dixBox = document.getElementById(options[i].value);
          divBox.style.display = 'none';
      }
  }
}

Umiddelbart ser det ud til at problemet er denne linje

dixBox = document.getElementById(options[i].value);

Tror ikke at der returneres det rigtigt til divBox...

Håber at der er nogen der kan hjælpe, har ikke selv særlig meget styr på javascript :(
Avatar billede roenving Novice
27. oktober 2004 - 23:10 #1
<select name="visHvilken" onchange="if(this.selectedIndex>0)document.getElementById(this.value).style.display='block';">
  <option>--Vælg eksempel--</option>
  <option value="eksempel1">Eksempel 1</option>
  <option value="eksempel2">Eksempel 2</option>
  <option value="eksempel3">Eksempel 3</option>
  <option value="eksempel4">Eksempel 4</option>
</select>

<div id="eksempel1">Eksempel 1</div>
<div id="eksempel2">Eksempel 2</div>
<div id="eksempel3">Eksempel 3</div>
<div id="eksempel4">Eksempel 4</div>

-- hvis du har brug for at gemme en tidligere valgt, skal vi selvfølgelig over i at gemme også ...
Avatar billede roenving Novice
27. oktober 2004 - 23:15 #2
-- og der skulle selvfølgelig have været style="display:none;" på diverne ...

Med skjulning kunne det være:

<script type="text/javascript">var presel = null</script>
<select name="visHvilken" onchange="if(this.selectedIndex>0){if(presel)presel.style.display='none';presel=document.getElementById(this.value);presel.style.display='block';}">
  <option>--Vælg eksempel--</option>
  <option value="eksempel1">Eksempel 1</option>
  <option value="eksempel2">Eksempel 2</option>
  <option value="eksempel3">Eksempel 3</option>
  <option value="eksempel4">Eksempel 4</option>
</select>

<div id="eksempel1" style="display:none;">Eksempel 1</div>
<div id="eksempel2" style="display:none;">Eksempel 2</div>
<div id="eksempel3" style="display:none;">Eksempel 3</div>
<div id="eksempel4" style="display:none;">Eksempel 4</div>
Avatar billede diff Nybegynder
29. oktober 2004 - 15:41 #3
Det fungere meget fint, der er dog en lille ting der stadig driller mig. I forhold til ovenstående eksempel vil jeg grene have, at div blokken for eksemple1 vises initielt, altså når siden loader.

Jeg prøvede at ændre dens display fra none til block, men det giver også nogle problemer ifht. at presel initialiseres til null

Og sidst men ikke mindst ville det være super lækkert hvis det kunne laves som en funktion

På forhånd tak for hjælpen...
Avatar billede roenving Novice
01. november 2004 - 01:50 #4
Det er en funktion !-)

Men den kan selvfølgelig lægges i en javascript-blok:

<script type="text/javascript">
var presel;
window.onload = function(){presel = document.getElementById('eksempel1');}
function visDiv(sel){
  if(sel.selectedIndex>0){
    if(presel)
      presel.style.display='none';
    presel=document.getElementById(sel.value);
    presel.style.display='block';
  }
}
</script>
<select name="visHvilken" onchange="visDiv(this)">

...

<div id="eksempel1" style="display:block;">Eksempel 1</div>
Avatar billede diff Nybegynder
01. november 2004 - 22:31 #5
Så virker det...

skulle lige rettte første if sætning til : sel.selectedIndex>=0 ellers betragtes options[0] jo aldrig ;)

Endvidere skulle window.onload = function(){presel = document.getElementById('eksempel1');}
Ned under <div id="eksempel1" style="display:block;">Eksempel 1</div>, ellers er presel = null...

Jeg takker alligevel mange gange roenving... Hvis du lige vil poste et svar så du også kan få lidt point...
Avatar billede roenving Novice
02. november 2004 - 01:00 #6
Det er meget med vilje, at jeg bruger >0, for ved at have en tom option sikres, at alle egentligt valgte medfører, at der registreres en ændring, men hvis man ikke vil have den tomme skal det spørgsmål bare fjernes !-)

Velbekomme '-)
Avatar billede diff Nybegynder
02. november 2004 - 12:29 #7
Ahh ja selvfølgelig, i og med at selectedIndex heller kan antage værdier forskellig fra de n options.
Avatar billede roenving Novice
02. november 2004 - 14:32 #8
-- og tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester