Avatar billede 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...!?
Avatar billede 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>
Avatar billede 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)
Avatar billede 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
Avatar billede 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?
Avatar billede 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
Avatar billede 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
Avatar billede 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
Avatar billede 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 !-)
Avatar billede 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:&nbsp;&nbsp;&nbsp;
<select name="sel1" id="sel1" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected>Vis alle</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel2" id="sel2" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel3" id="sel3" onchange="createOpts(this,'sel1','sel2','sel3','sel4');">
<option value="" selected>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel4" id="sel4">
<option value="" selected>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br><br>



</body>
</html>
Avatar billede 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!
Avatar billede roenving Novice
23. august 2009 - 14:46 #11
Velbekomme '-)
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