<tr> tonen d.m.v. selectie in keuzelijst

Status
Niet open voor verdere reacties.
W

wouteronline55

Gebruiker
Lid geworden
29 dec 2005
Berichten
61
Beste Forumleden,

Ik ben een nieuwkomer als het gaat om javascript, maar wel redelijk wat ervaring met HTML & PHP. Nu ben ik op zoek naar iemand die mij op weg kan helpen met het volgende:

ik heb een keuzelijst aangemaakt met HTML en nu wil ik een rij van een tabel <tr> tonen a.d.h.v. de huidige selectie van deze keuzelijst. Tevens moet er wanner er meerdere keren op hetzelfde item wordt geklikt, niet elke keer het resultaat weg gaan (zoals bij Onclick letterlijk gebeurd).

Kan iemand mij op weg helpen of mij verwijzen naar een script dat ik hiervoor kan gebruiken?

Alvast bedankt!
 
Ja, zoiets bedoel ik precies ;)

Alleen dan zonder een database maar direct in het script...
 
Is dat een PHP-bestand?

Wellicht kun je hier wat mee? De source is hier te vinden.

Zoals je ziet staan de "antwoorden" in een PHP-array.
 
Geen dank :)

Zet je de status nog even op "Opgelost"? (Rechtsonder)
 
Ik denk dat ik iets te voorbarig ben geweest met mijn dankuitingen... het systeem werkt opzich wel goed, maar het is geen onderdeel van de huidige pagina. Dit betekent dus dat wanneer ik een Form onderdeel middels deze manier aanroep, deze niet mee wordt genomen naar de "action-page" van dat formulier. Ook kan ik geen <tr> of <td> invoegen in een reeds bestaande tabel.

Iemand ideeën?
 
Laatst bewerkt:
Ik ben hier ook niet echt thuis in maar toch maar posten om reactie uit te lokken want niemand antwoordt.

Bedoel je dat afhankelijk van de selectie iets anders getoond wordt in een bepaalde rij van een tabel?

de id van de select is bvb id="keuzelijst"
de id van de tr is bvb id="rij"

onclick="keuze()" toevoegen aan de select
en dan de methode

function keuze(){
var optie=document.getElementById('keuzelijst').selectedIndex;
var rij=document.getElementById('rij');
switch(optie)
{
case 0:
rij.innerHTML="<td>blabla</td><td>blabla2</td>";
break;
case 1:
rij.innerHTML="...";
break;
default:
rij.innerHTML="wat er staat als optie 0 of 1 niet geselecteerd zijn";
break;
}
}

Is het zoiets dat je bedoelt?
 
Bedankt voor je reactie!

Dat is inderdaad wat ik bedoel.

Ik denk dat je hier wel goed zit met de code. Ik snap alleen nog even niet hoe ik de input vorm moet geven? Ik heb nu:

PHP: 
<SELECT NAME="voorbeeld" onchange="keuze(this.value)">
<OPTION value="optie1">Optie 1</OPTION>
<OPTION value="optie2">Optie 2</OPTION>

Ik kan helaas niet controleren of dit goed is omdat ik niet weet hoe ik de output aan moet roepen in de HTML code waar deze moet staan...

Zou je dat misschein nog kunnen aangeven?
 
Ik heb een voorbeeld gemaakt van de hele code.
Er was een probleem met innerHTML. Daar mag je niet een rij op deze manier opgeven. Je moet iedere cel apart aanpassen.

De derde optie (case 2) heb ik niet apart opgegeven zodat je ziet dat dan default wordt gebruikt.

Code: 
<html>
<head>
<title>
Keuzelijst - test
</title>
<script type="text/javascript">
function keuze(){
  var optie=document.getElementById('keuzelijst').selectedIndex;
  var el1=document.getElementById('el1');
  var el2=document.getElementById('el2');
  switch(optie){
    case 0:
      el1.innerHTML="optie1, blabla1";
      el2.innerHTML="optie1, blabla2";
      break;
    case 1:
      el1.innerHTML="optie2, blabla1";
      el2.innerHTML="optie2, blabla2";
      break;
    default:
      el1.innerHTML="onbekende optie, blabla1";
      el2.innerHTML="onbekende optie, blabla2";
  }
}
</script>
</head>

<body>

<table border="2">
<tr>
<td id="el1">
</td>
<td id="el2">
</td>
</tr>
</table>

<form>
<select id="keuzelijst" onchange="keuze()">
  <option value="optie1">Optie 1</option>
  <option value="optie2">Optie 2</option>
  <option value="optie3">Optie 3</option>
</select>
</form>

</body>

</html>

De selectedIndex-functie neemt dus 0 voor de eerst optie, 1 voor de tweede enzovoort. En dan worden deze als gevallen (case) behandeld.
 
Als je wil dat bij het laden van de pagina al de functie keuze wordt uitgevoerd voeg je dit nog toe voor </body>

<script type="text/javascript">
keuze();
</script>

Na testen blijkt dat de geselecteerde optie bij het laden blijkbaar altijd de eerste is.

edit: Dit is ietwat vreemd. De geselecteerde optie blijft de eerste, ook wanneer bvb optie3 geselecteerd is en dan reload wordt gedrukt. Als je dan "verandert" naar optie3 na de reload blijft de tekst op die van optie1 staan. Dit misschien toch maar dit niet toevoegen aan het script, tenzij je de onchange verandert in onclick. Het enige wat dan nog raar is is dat bij reloaden altijd de optie1-tekst verschijnt, maar mss is dat dan ook effectief de optie die geselecteerd is. Als je dan als hij bvb in de plaats op optie3 staat nog eens 'verandert' naar optie3 zal dan wss wel de selectie optie3 worden, dus in dat geval is het dan (denk ik) altijd ok. Ik weet eigenlijk niet hoe formulieren werken, nog nooit gebruikt.
 
Laatst bewerkt:
Bedankt voor je reactie. Het werkt super! Ik heb alleen een "onclick" bij iedere <option> gezet. dat werkt net iets lekkerder.

Ik zit alleen nog met 1 ding. Als de pagina laadt, dan zou ik graag willen dat standaard `default´ wordt getoond i.p.v. helemaal niets. Heb je daar wat op?
 
Als je de toevoeging uit mijn tweede reactie gebruikt wordt in het begin de optie1 die dan geselecteerd is getoond. Wil je enkel dat dan in de plaats de default wordt getoond? Dit kan je zo

<script type="text/javascript">
document.getElementById('el1').innerHTML="onbekende optie, blabla1";
document.getElementById('el2').innerHTML="onbekende optie, blabla2";
</script>

toevoegen voor </body>

Zo werkt het wel maar dat je dit herhaalt is niet zo positief aan de opbouw natuurlijk. Voor deze toevoeging was mijn script niet zo goed opgebouwd. Als je wil kan je het mss zelf proberen aan te passen.


Als je ook wil dat er in het begin niets geselecteerd is in het menu (een lege optie) dan denk ik dat iemand anders met een antwoord gaat moeten komen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan