CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

mr-buchwald Nybegynder

27. juli 2009 - 11:13 Der er 10 kommentarer og
1 løsning

1, 2, 3... men 4 afhængige selects?!

Halløjsa!

Jeg har siddet og grublet længe over, hvordan jeg kunne lave 4 selects der er afhængige af hinanden. Jeg har nemt kunne få op til 3 afhængige selects, da de fleste eksempler på nettet er til 3 eller mindre.
Men nu er det altså sådan, at jeg skal have lavet en på 4. Jeg har, efter lang tids søgning, fundet dette eksempel, som skulle kunne lave et utælleligt antal afhængige selects:
http://www.javascripttoolbox.com/lib/dynamicoptionlist/documentation.php

Men når jeg selv prøver, vil dette script også kun virke op til 3 selects. Her er min kode:

<script type="text/javascript" src="scripts/selects/dynamicoptionlist.js"></script>

<script type="text/javascript">

var dol = new DynamicOptionList("land","amt","herred","sogn");

dol.forText("L1").addOptions("L1A1","L1A2","L1A3");
dol.forText("L2").addOptions("L2A1","L2A2","L2A3");

dol.forText("L1").forText("L1A1").addOptions("L1A1H1","L1A1H2","L1A1H3");

dol.forText("L1").forText("L1A1").forText("L1A1H1").addOptions("L1A1H1S1","L1A1H1S2","L1A1H1S3");

</script>

.. som sidder i <head> og længere nede sidder selve drop-down-listerne:

<select name="land">
<option>L1</option>
<option>L2</option>
</select>

<select name="amt">
<script type="text/javascript">do.printOptions("amt")</script>
</select>

<select name="herred">
<script type="text/javascript">do.printOptions("herred")</script>
</select>

<select name="sogn">
<script type="text/javascript">do.printOptions("sogn")</script>
</select>

Nu er spørgsmålet så, hvad der er gjort forkert?

Det næste jeg så skal gruble over, er hvordan jeg på en god måde, får den til at hente alle data til de 4 selects ned fra en MySQL-database...!?

Synes godt om

olebole Juniormester

27. juli 2009 - 13:22 #1

<ole>

Da du ikke har lagt det ind i en funktion, afvikles JavaScriptet formodentlig længe inden, din browser er kommet ned til koden, som implementerer dine selects. Den har derfor ingen anelse om, hvilke elementer siden består af, når scriptet kører.

Du kan f.eks. lægge scriptet ned i bunden af dokumentet - lige før </body>. Så virker det formodentlig

/mvh
</bole>

Synes godt om

olebole Juniormester

27. juli 2009 - 13:23 #2

PS: Husk altid at have fejlmeddelelser slået til i browsere, så du kan se, hvad du laver af fejl. Det er et must, når man udvikler til WWW ;o)

Synes godt om

mr-buchwald Nybegynder

27. juli 2009 - 15:00 #3

Nu har jeg prøvet at sætte scriptet ned under de 4 selects, men uden den mindste bedring.

Jeg har nu hentet fejlmeddelserne, som Opera har vist.

JavaScript
User Javascript thread
Error:
name: TypeError
message: Statement on line 2097: Type mismatch (usually non-object value supplied where object required)
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

JavaScript
Inline script compilation
Syntax error while loading: line 1 of inline script at http://127.0.0.1/***.php :
Expected statement
do.printOptions("amt")
---^

JavaScript
Inline script compilation
Syntax error while loading: line 1 of inline script at http://127.0.0.1/***.php :
Expected statement
do.printOptions("herred")
---^

JavaScript
Inline script compilation
Syntax error while loading: line 1 of inline script at http://127.0.0.1/***.php :
Expected statement
do.printOptions("sogn")
---^

JavaScript
Event thread: load
Error:
name: TypeError
message: Statement on line 276: Cannot convert undefined or null to Object
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

Synes godt om

olebole Juniormester

27. juli 2009 - 15:27 #4

Jeg kan ikke se, du har nogen objekter ved navn do. Derimod har du et, som hedder dol, så mon ikke, der skal stå:
<script type="text/javascript">dol.printOptions("amt")</script>

- og så fremdeles?

Synes godt om

mr-buchwald Nybegynder

27. juli 2009 - 16:37 #5

Nu får jeg disse fejlmeddelser i stedet - Ingen forbedringer hvad ang. den 4. select.

JavaScript
User Javascript thread
Error:
name: TypeError
message: Statement on line 2097: Type mismatch (usually non-object value supplied where object required)
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

JavaScript
Inline script thread
Error:
name: ReferenceError
message: Statement on line 1: Undefined variable: dol
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

JavaScript
Inline script thread
Error:
name: ReferenceError
message: Statement on line 1: Undefined variable: dol
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

JavaScript
Inline script thread
Error:
name: ReferenceError
message: Statement on line 1: Undefined variable: dol
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

JavaScript
Event thread: load
Error:
name: TypeError
message: Statement on line 276: Cannot convert undefined or null to Object
stacktrace: n/a; see opera:config#UserPrefs|Exceptions Have Stacktrace

Synes godt om

roenving Novice

27. juli 2009 - 18:45 #6

Måske mit oldgamle og svært håndtérlige script: http://roenving.users.whitehat.dk/WD4Selects-beta.html

Synes godt om

mr-buchwald Nybegynder

27. juli 2009 - 20:29 #7

Det skam ikke så ringe endda. Det er faktisk det script, jeg har brugt ind til nu, da jeg fik behov for 4 afhængige selects.

Jeg har også forsøgt med dit script, men uden held.

Hvis du kan omskrive det til 4 afhængige selects ville det også bare være super! :D

Synes godt om

roenving Novice

28. juli 2009 - 13:05 #8

Største problem er helt klart at have styr på databasen, arrayet som indeholder data ...

-- vil lave et eksempel hvor der er fire niveauer !-)

Synes godt om

roenving Novice

28. juli 2009 - 15:26 #9

Sådan, som sagt pas på databasen !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Smart selects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 type="text/javascript">
var arr = [
["Valg 1",[
["2. valg 1 (1)",[
["3. valg 1 (1-1)",
["4. valg 1 (1-1-1)","4. valg 2 (1-1-1)","4. valg 3 (1-1-1)"]],
["3. valg 2 (1-1)",
["4. valg 1 (1-1-2)","4. valg 2 (1-1-2)","4. valg 3 (1-1-2)"]],
["3. valg 3 (1-1)",
["4. valg 1 (1-1-3)","4. valg 2 (1-1-3)","4. valg 3 (1-1-3)"]],
["3. valg 4 (1-1)",
["4. valg 1 (1-1-4)","4. valg 2 (1-1-4)","4. valg 3 (1-1-4)"]]]],
["2. valg 2 (1)",[
["3. valg 1 (1-2)",
["4. valg 1 (1-2-1)","4. valg 2 (1-2-1)","4. valg 3 (1-2-1)"]],
["3. valg 2 (1-2)",
["4. valg 1 (1-2-2)","4. valg 2 (1-2-2)","4. valg 3 (1-2-2)"]],
["3. valg 3 (1-2)",
["4. valg 1 (1-2-3)","4. valg 2 (1-2-3)","4. valg 3 (1-2-3)"]]]],
["2. valg 3 (1)",[
["3. valg 1 (1-2)",
["4. valg 1 (1-2-1)","4. valg 2 (1-2-1)","4. valg 3 (1-2-1)"]],
["3. valg 2 (1-2)",
["4. valg 1 (1-2-2)","4. valg 2 (1-2-2)","4. valg 3 (1-2-2)"]],
["3. valg 3 (1-2)",
["4. valg 1 (1-2-3)","4. valg 2 (1-2-3)","4. valg 3 (1-2-3)"]]]]]],
["Valg 2",[
["2. valg 1 (2)",[
["3. valg 1 (2-1)",
["4. valg 1 (2-1-1)","4. valg 2 (2-1-1)","4. valg 3 (2-1-1)"]],
["3. valg 2 (2-1)",
["4. valg 1 (2-1-2)","4. valg 2 (2-1-2)","4. valg 3 (2-1-2)"]],
["3. valg 3 (2-1)",
["4. valg 1 (2-1-3)","4. valg 2 (2-1-3)","4. valg 3 (2-1-3)"]],
["3. valg 4 (2-1)",
["4. valg 1 (2-1-4)","4. valg 2 (2-1-4)","4. valg 3 (2-1-4)"]]]],
["2. valg 2 (2)",[
["3. valg 1 (2-2)",
["4. valg 1 (2-2-1)","4. valg 2 (2-2-1)","4. valg 3 (2-2-1)"]],
["3. valg 2 (2-2)",
["4. valg 1 (2-2-2)","4. valg 2 (2-2-2)","4. valg 3 (2-2-2)"]],
["3. valg 3 (2-2)",
["4. valg 1 (2-2-3)","4. valg 2 (2-2-3)","4. valg 3 (2-2-3)"]]]],
["2. valg 3 (2)",[
["3. valg 1 (2-2)",
["4. valg 1 (2-2-1)","4. valg 2 (2-2-1)","4. valg 3 (2-2-1)"]],
["3. valg 2 (2-2)",
["4. valg 1 (2-2-2)","4. valg 2 (2-2-2)","4. valg 3 (2-2-2)"]],
["3. valg 3 (2-2)",
["4. valg 1 (2-2-3)","4. valg 2 (2-2-3)","4. valg 3 (2-2-3)"]]]]]],
["Valg 3",[
["2. valg 1 (3)",[
["3. valg 1 (3-1)",
["4. valg 1 (3-1-1)","4. valg 2 (3-1-1)","4. valg 3 (3-1-1)"]],
["3. valg 2 (3-1)",
["4. valg 1 (3-1-2)","4. valg 2 (3-1-2)","4. valg 3 (3-1-2)"]],
["3. valg 3 (3-1)",
["4. valg 1 (3-1-3)","4. valg 2 (3-1-3)","4. valg 3 (3-1-3)"]],
["3. valg 4 (3-1)",
["4. valg 1 (3-1-4)","4. valg 2 (3-1-4)","4. valg 3 (3-1-4)"]]]],
["2. valg 2 (3)",[
["3. valg 1 (3-2)",
["4. valg 1 (3-2-1)","4. valg 2 (3-2-1)","4. valg 3 (3-2-1)"]],
["3. valg 2 (3-2)",
["4. valg 1 (3-2-2)","4. valg 2 (3-2-2)","4. valg 3 (3-2-2)"]],
["3. valg 3 (3-2)",
["4. valg 1 (3-2-3)","4. valg 2 (3-2-3)","4. valg 3 (3-2-3)"]]]],
["2. valg 3 (3)",[
["3. valg 1 (3-2)",
["4. valg 1 (3-2-1)","4. valg 2 (3-2-1)","4. valg 3 (3-2-1)"]],
["3. valg 2 (3-2)",
["4. valg 1 (3-2-2)","4. valg 2 (3-2-2)","4. valg 3 (3-2-2)"]],
["3. valg 3 (3-2)",
["4. valg 1 (3-2-3)","4. valg 2 (3-2-3)","4. valg 3 (3-2-3)"]]]]]]
];
//alert(arr1[1][1])
function initSels(){
createOpts(document.getElementById('sel1'));
}

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 --";
}
}
}
window.onload = function(){
initSels();
}
</script>
</head>

<body>
<h1 style=>Working demo #4 beta2 - 4 afhængige</h1>
Afhængige selects<br><br>

Fire afhængige selects:   
<select name="sel1" id="sel1" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected>Vis alle</option>
</select>      
<select name="sel2" id="sel2" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected><-- Vælg --</option>
</select>      
<select name="sel3" id="sel3" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected><-- Vælg --</option>
</select>      
<select name="sel4" id="sel4">
<option value="" selected><-- Vælg --</option>
</select>      
<br><br>

</body>
</html>

Synes godt om

mr-buchwald Nybegynder

23. august 2009 - 14:19 #10

Genialt! - Det virker bare!

Jeg kan se, at jeg modificerede den forkert i sin tid :D

TUSIND tak for hjælpen! :P
Læg et svar, så du kan få dine VELFORTJENTE points!

Synes godt om

roenving Novice

23. august 2009 - 14:46 #11

Velbekomme '-)

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

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Beregning af sum via PHP og SQL Af dane022 i JavaScript	3	10/02/202421:38	12/02/202409:41
Kode der tjekker telefonnummer i formular Af Asky i JavaScript	2	27/12/202321:42	28/12/202314:41
Nogle af mine formularer i PHP er plaget af spam Af Asky i JavaScript	12	19/12/202313:31	10/01/202411:04
Vis data fra en anden fil i en div Af EveryMA i JavaScript	2	19/10/202307:02	20/10/202307:02
js til asp backend Af keepy i JavaScript	1	11/10/202310:28	11/10/202313:46

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