Notifikationer

Markér alle som læst Log ud

hvaskerder Nybegynder

18. februar 2007 - 21:00 Der er 13 kommentarer og
1 løsning

få selectbokse til at påvirke hinanden

Hvordan laver man 2 selectbokse der bliver påvirket af det valg man laver i den første boks?? eks. første boks vælger man 'rød' og i den anden kommer der til at stå 'mørkerød, lyserød'. og hvis man vælger 'blå' i den første boks kommer der til at stå 'mørkeblå, lyseblå' i den anden.. håber det er til at forstå.. :P

Synes godt om

Six Nybegynder

18. februar 2007 - 21:08 #1

Roenving har lavet et eksempel, som du kan se her: http://roenving.users.whitehat.dk/ Vælg #4 Multible select beta

Vælg vis kilde og se koden bag.

Synes godt om

hvaskerder Nybegynder

18. februar 2007 - 21:47 #2

Har prøvet at rode lidt med det her nu, men hvor skal jeg skrive valgmulighederne henne??

Synes godt om

Six Nybegynder

18. februar 2007 - 22:34 #3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Smart selects</title>
<script language="javascript" type="text/javascript">
if(top.location==window.location){top.location.replace(top.location.href.substring(0,top.location.href.lastIndexOf("/"))+"/index.html?"+escape(location.pathname))}
</script>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK HREF="style/style.css" REL="stylesheet" TYPE="text/css">
<style type="text/css">
body{padding:10px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:center;background:#EBD3E2;line-height:1.5;overflow:hidden;}
</style>

<script language="javascript" type="text/javascript">
var arr = [
["Valg 1",[
["2. valg 1 (1)",
["3. valg 1 (1-1)","3. valg 2 (1-1)","3. valg 3 (1-1)","3. valg 4 (1-1)"]],
["2. valg 2 (1)",
["3. valg 1 (1-2)","3. valg 2 (1-2)","3. valg 3 (1-2)"]],
["2. valg 3 (1)",
["3. valg 1 (1-3)","3. valg 2 (1-3)","3. valg 3 (1-3)","3. valg 4 (1-3)"]]]],
["Valg 2",[
["2. valg 1 (2)",
["3. valg 1 (2-1)","3. valg 2 (2-1)","3. valg 3 (2-1)","3. valg 4 (2-1)"]],
["2. valg 2 (2)",
["3. valg 1 (2-2)","3. valg 2 (2-2)"]],
["2. valg 3 (2)",
["3. valg 1 (2-3)","3. valg 2 (2-3)","3. valg 3 (2-3)","3. valg 4 (2-3)","3. valg 5 (2-3)","3. valg 6 (2-3)","3. valg 7 (2-3)","3. valg 8 (2-3)","3. valg 9 (2-3)","3. valg 10 (2-3)","3. valg 11 (2-3)","3. valg 12 (2-3)","3. valg 13 (2-3)","3. valg 14 (2-3)","3. valg 15 (2-3)","3. valg 16 (2-3)","3. valg 17 (2-3)","3. valg 18 (2-3)","3. valg 19 (2-3)","3. valg 20 (2-3)","3. valg 21 (2-3)"]],
["2. valg 4 (2)",
["3. valg 1 (2-4)","3. valg 2 (2-4)","3. valg 3 (2-4)","3. valg 4 (2-4)"]]]],
["Valg 3",[
["2. valg 1 (3)",
["3. valg 1 (3-1)","3. valg 2 (3-1)","3. valg 3 (3-1)"]],
["2. valg 2 (3)",
["3. valg 1 (3-2)","3. valg 2 (3-2)","3. valg 3 (3-2)"]],
["2. valg 3 (3)",
["3. valg 1 (3-3)","3. valg 2 (3-3)","3. valg 3 (3-3)"]],
["2. valg 4 (3)",
["3. valg 1 (3-4)","3. valg 2 (3-4)","3. valg 3 (3-4)"]],
["2. valg 5 (3)",
["3. valg 1 (3-5)","3. valg 2 (3-5)","3. valg 3 (3-5)"]]]]
];
//alert(arr1[1][1])
function initSels(){
createOpts(document.getElementById('sel1'));
createOpts(document.getElementById('sel3'));
}

function createOpts(sel){
var s = new Array();
var num = 0, txt = "arr";
var ar = opt = null;
var n = sel.selectedIndex;
var args = createOpts.arguments.length;
for(var i=1;args>i;i++){
s[i-1] = document.getElementById(createOpts.arguments[i]);
if(s[i-1]==sel)num=i;
}
if(args>1){
if(s[num])sel = s[num];
else return;
}
if(n==0&&args>1){
for(i=num;args>i+1;i++){
s[i].length = 0;
opt = document.createElement('OPTION');
s[i].appendChild(opt);
opt.value = "";
opt.text = "\74-- Vælg --";
}
return true
};
for(i=0;num>i;i++){
txt+="["+(s[i].selectedIndex-1)+"][1]";
}
ar = eval(txt);
sel.length = 0;
opt = document.createElement('OPTION');
sel.appendChild(opt);
opt.value = "";
opt.text = "-- Vælg --";
for(i=0;ar.length>i;i++){
opt = document.createElement('OPTION');
sel.appendChild(opt);
if(typeof ar[i] == 'object'){
opt.value = ar[i][0];
opt.text = ar[i][0];
}else{
opt.value = ar[i];
opt.text = ar[i];
}
}
if(args>num+2){
for(i=num+1;args-1>i;i++){
s[i].length = 0;
opt = document.createElement('OPTION');
s[i].appendChild(opt);
opt.value = "";
opt.text = "\74-- Vælg --";
}
}
}
</script>
</head>
<body style="FONT-SIZE: 12px" onload="initSels()">
<h1 style="LINE-HEIGHT: 0.8">Working demo #4 beta2</h1>
Afhængige selects<br><br>
<div style="TEXT-ALIGN: left">

<form name="sels" action="http://roenving.users.whitehat.dk" onsubmit="return false;">
To afhængige selects:   
<select name="sel1" id="sel1" onchange="createOpts(this,'sel1','sel2');">
<option value="" selected>Vis alle</option>
</select>      
<select name="sel2" id="sel2">
<option value="" selected
><-- Vælg --</option>
</select>      <br><br>

Tre afhængige selects:   
<select name="sel3" id="sel3" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected>Vis alle</option>
</select>      
<select name="sel4" id="sel4" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected><-- Vælg --</option>
</select>      
<select name="sel5" id="sel5">
<option value="" selected
><-- Vælg --</option>
</select>      <br><br>
</form>
<br><br>
</div><br><br>
Pt. kan koden ses ved: <span class="i">Vis kode</span>,<br>
jeg vil snarest sørge for at den er tilgængelig kopierbar (som i de andre WD's)<br>
<span class="b">Bemærk</span>, at javascript-databasen er følsom overfor småfejl i [ / ] -erne ...
<br><br>
<h6>Sidste opdatering 12.08.2003</h6>
</body>
</html>

Synes godt om

hvaskerder Nybegynder

19. februar 2007 - 22:00 #4

Hvis jeg vil ændre teksten i 2. og 3. valg hvor skal jeg gøre det??

Synes godt om

roenving Novice

25. februar 2007 - 02:57 #5

Nu bøvlede jeg en hel del med ovenstående kode, fordi jeg ville have den til at være skalérbar, så det kan gøres adskilligt simplere, hvis man bare har to, se f.eks. http://www.eksperten.dk/spm/615326 !-)

Synes godt om

hvaskerder Nybegynder

25. februar 2007 - 08:33 #6

Hej Roenving.. Jeg har fundet ud af det, næsten.. Når jeg vægler i den første boks, kan man så gøre det sådan at de 2 næste bokse hedder det samme som før?? Se evt. hvordan jeg har lavet det indtil videre her; http://www.morph-breed.com/signup.html

Synes godt om

roenving Novice

25. februar 2007 - 15:03 #7

Jeg ville bruge den simple med 2 options, for den sidste skal jo altid være male/female !-)

Synes godt om

hvaskerder Nybegynder

25. februar 2007 - 15:55 #8

Har kigget på den du har linket til, men hvordan konfigurerer du option 2 så den skifter når du vælger i option 1?? Kan heller ikke få option 2 til at blive vist..

Synes godt om

hvaskerder Nybegynder

25. februar 2007 - 15:56 #9

Fandt ud af det med at få den vist.. :D nu mangler den bare at skifte i takt med option 1..

Synes godt om

roenving Novice

25. februar 2007 - 16:14 #10

F.eks.

<script type="text/javascript">
var morphs = new Array();
morphs[morphs.length] = ["Amel","Amel Aztec","Amel Stripe","Amel Motley","Anery","Anery Aztec","Snow","Snow Aztec","Normal","Normal Aztec"];
morphs[morphs.length] = ["Normal","Het. Albino","Pastel","Pastel Sibling"];

function showMorphs(elm){
var sel = elm.form.select2;
if(elm.selectedIndex>0){
sel.length = 1;
var arrNum = elm.selectedIndex-1;
for(i=0;morphs[arrNum].length>i;i++){
sel.options[sel.length] = new Option(morphs[arrNum][i]);
sel.style.display = 'inline';
}
}
}
</script>

...

<form id="minForm" name="minForm">
<select name="minSelect" id="minSelect" onchange="showMorphs(this);">
<option value="" selected>Type of Animal</option>
<option>Cornsnake</option>
<option>Ball Python</option>
</select>
<select name="select2" id="select2">
<option value="">Select Morph</option>
</select>
<select name="select3">
<option value="" >Type of Sex</option>
<option value="male" >Male</option>
<option value="female" >Female</option>
</select>
<br>
<br>
E-Mail adress:<br>
<input type="text" name="from">
<br>
Comment<br>
<textarea cols="20" rows="5" name="kommentar"></textarea>
<br>
<input type="submit" name="ok" value=" - Send - ">
</form>
</p>
</div>
</p>
</form>

Synes godt om

hvaskerder Nybegynder

25. februar 2007 - 19:27 #11

Takker.. Du er alt for sej..! :D Læg et svar så giver jeg dig nogen point.. :D

Synes godt om

hvaskerder Nybegynder

25. februar 2007 - 19:34 #12

Kan man ændre skrifttypen i boksene? Har en style som jeg gerne vil bruge..

Synes godt om

roenving Novice

27. februar 2007 - 02:02 #13

Stylen sætter du bare på boksene, f.eks.

<select name="select2" id="select2" style="font-family:'Comic Sans MS',fantasy;">

-- els velbekomme '-)

Synes godt om

roenving Novice

27. februar 2007 - 13:38 #14

-- og tak for point ;~}

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS