Avatar billede kresten112 Nybegynder
03. august 2003 - 23:25 Der er 12 kommentarer og
1 løsning

Valg af radio-knap definerer options i en dropdownmenu

Forestil jer, at man har 4 radioknapper og en enkelt dropdownmenu ved siden af.

Afhængigt af hvilken radioknap man vælger, skal dropdownmenuen have forskellige menupunkter (i stedet for flere dropdownmenuer).

Desuden skal den tilhørende form submittes når man vælger et menupunkt i dropdownmenuen

Hvordan ville man lave det i javascript?
Avatar billede kresten112 Nybegynder
03. august 2003 - 23:40 #1
Her er lidt kode at arbejde med: Hvis man vælger Metode skal option 5-6 også med, og hvis man vælger tutorgruppe skal option 5-10 med. Ellers bare 1-4

<form name="gruppehold">
<table border="0" width="250" align="center"><tr><td width=100% align="left">
<fieldset><legend>Vælg tutorgruppe eller øvelseshold</legend>
<table border="0"><tr><td width="170" align="right">


<label for="tutorgr">Tutorgruppe</label>
<input type="radio" name="radio" value="tutorgr" id="tutorgr"
onclick="document.gruppehold.nummer.disabled = false">
<br>
<label for="ovhold">Almen Sociologi</label>
<input type="radio" name="radio" value="almen" id="almen"
onclick="document.gruppehold.nummer.disabled = false">
<br>
<label for="ovhold">Danske Samfund</label>
<input type="radio" name="radio" value="danske" id="danske"
onclick="document.gruppehold.nummer.disabled = false">
<br>
<label for="ovhold">Metode</label>
<input type="radio" name="radio" value="metode" id="danske"
onclick="document.gruppehold.nummer.disabled = false">
<br>
<select name="nummer" id="nummer" disabled>
<option value="">Vis alle</option>
<option value="1">Hold 1</option>
<option value="2">Hold 2</option>
<option value="3">Hold 3</option>
<option value="4">Hold 4</option>
<option value="5">Hold 5</option>
<option value="6">Hold 6</option>
<option value="7">Hold 7</option>
<option value="8">Hold 8</option>
<option value="9">Hold 9</option>
<option value="10">Hold 10</option>
</select>

</td></tr></table>
</fieldset>
</td></tr><table>
</form>
Avatar billede roenving Novice
03. august 2003 - 23:58 #2
Hedder de virkelig det samme ?-)
Avatar billede roenving Novice
04. august 2003 - 00:00 #3
Altså Hold 1,2 osv ...
Avatar billede kresten112 Nybegynder
04. august 2003 - 00:08 #4
Ja, hvert fag/gruppe har flere hold tilknyttet, og når man har valgt fag/gruppe i radio-delen er det jo underforstået at det er fx. Almen, Hold 1 man vælger
Avatar billede kresten112 Nybegynder
04. august 2003 - 00:11 #5
Men som sagt: Pointen er, at hver fag/gruppe har et forskelligt ANTAL hold tilknyttet, så derfor skal bruger kun have fire valgmuligheder, hvis han vælger Almen sociologi eller Danske Samfund, men han skal have 10 valgmuligheder, hvis han vælger tutorgrupper... - burde man stille det op på en anden måde, synes du...?
Avatar billede roenving Novice
04. august 2003 - 00:16 #6
Sådan ?-)

option 5-10 med. Ellers bare 1-4 -->
<script language="javascript" type="text/javascript">

function changeNummer(n){
sel = document.gruppehold.nummer;
sel.length = 0;
    opt = document.createElement('OPTION');
    sel.appendChild(opt);
  opt.value = "";
  opt.text = "Vis alle";
for(i=1;n>=i;i++){
    opt = document.createElement('OPTION');
    sel.appendChild(opt);
  opt.value = "" + i;
  opt.text = "Hold " + i;
}
}
</script>

<form name="gruppehold">
<table border="0" width="250" align="center"><tr><td width=100% align="left">
<fieldset><legend>Vælg tutorgruppe eller øvelseshold</legend>
<table border="0"><tr><td width="170" align="right">


<label for="tutorgr">Tutorgruppe</label>
<input type="radio" name="radio" value="tutorgr" id="tutorgr"
onclick="changeNummer(10);document.gruppehold.nummer.disabled = false">
<br>
<label for="almen">Almen Sociologi</label>
<input type="radio" name="radio" value="almen" id="almen"
onclick="changeNummer(4);document.gruppehold.nummer.disabled = false">
<br>
<label for="danske">Danske Samfund</label>
<input type="radio" name="radio" value="danske" id="danske"
onclick="changeNummer(4);document.gruppehold.nummer.disabled = false">
<br>
<label for="metode">Metode</label>
<input type="radio" name="radio" value="metode" id="metode"
onclick="changeNummer(6);document.gruppehold.nummer.disabled = false">
<br>
<select name="nummer" id="nummer" disabled>
</select>

</td></tr></table>
</fieldset>
</td></tr><table>
</form>
Avatar billede roenving Novice
04. august 2003 - 00:18 #7
Fik nok lige fjernet for mange options i start-positionen, så denne skal nok være der fra starten:
<option value="">Vis alle</option>
Avatar billede roenving Novice
04. august 2003 - 00:20 #8
Skulle virke fra IE5 og NS6 -- og alle nyere browsere ...
Avatar billede kresten112 Nybegynder
04. august 2003 - 00:23 #9
Hæng på - jeg prøver.....
Avatar billede kresten112 Nybegynder
04. august 2003 - 00:36 #10
Det var satans.... :-)) Det virker perfekt, og når man sender resultaterne til en anden side og requester dem, kommer de smukt frem som de skal!

Hvis du giver mig et svar skal du få nogle point. Jeg har dog en finte jeg gerne ville have med: Kan du lave det sådan, så formen automatisk submitter, når man vælger hold i dropdownmenuen...?
Avatar billede roenving Novice
04. august 2003 - 00:41 #11
Ja, den sætter vi på en onchange på selecten, der skal jo altid ændres værdi !-)

<select name="nummer" id="nummer" disabled onchange="this.form.submit();">
<option value="">Vis alle</option>
</select>

Hvis du ellers skal have valideret onsubmit, skal så kaldes før den submit-funktion kaldes, altså f.eks.

onchange="valider(this.form);this.form.submit();"

-- og velbekomme '-)
Avatar billede kresten112 Nybegynder
04. august 2003 - 00:49 #12
Smukt arbejde!

Jeg forstod dog ikke din kommentar 00:18:13 - det virker fint nok som jeg ser det....
Avatar billede roenving Novice
04. august 2003 - 01:07 #13
Jeg havde fjernet dummyen også, og det ser lidt mærkeligt ud, at den starter med at være smal, det er jo nok, at den er disabled indtil der er noget i !-)

-- og tak for points ;~}
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