Avatar billede kejej Nybegynder
15. september 2006 - 09:51 Der er 5 kommentarer og
2 løsninger

Specielt valg

Mit problem er, at jeg er ikke er nogen haj til javascript - og trænger til hjælp...

Jeg har et sted hvor man via en dropdown kan vælge mellem 4 byer - NÅR der er valgt en by (og ikke før) skal det være muligt at vælge mellem 4 cafe'er, der hører til den valgte by.

Jeg ved det kan gøres med javascript, men ikke hvordan. Jeg har forsøgt mig lidt selv, men kom ikke rigtig nogen vegne - de tal jeg har skrevet (7718 og 7719) er de ID numre der bestemmer hvor i databasen det indtastede data skal ligge, og de skal derfor med 'på en eller anden måde'.

Håber virkelig at der er nogen der kan hjælpe mig, da jeg er på herrens mark efterhånden. Tak

------------------

<select id="city" onchange="setcity('f7718')" style="width: 140px; font-size: 10px;">
<option value="">[Vælg By]</option>
<option value="Aalborg-1" >Aalborg</option>
<option value="Århus-2" >Århus</option>
<option value="København-3" >København</option>
<option value="Odense-4" >Odense</option>
                  </select>
   

<select id="cafe" onchange="setcafe('f7719')" style="width: 140px; font-size: 10px;">
<option value="">[Vælg en favorit café]</option>
<option value="1-Ministeriet" >Café Ministeriet</option>
<option value="1-Vesterå" >Café Vesterå</option>
<option value="1-Nielsen" >Hr Nielsen</option>
<option value="1-Saltlageret" >Saltlageret</option>
               
<option value="2-Bridgewater" >Bridgewater</option>
<option value="2-Faust" >Café Faust</option>
<option value="2-Kindrødt" >Café Kindrødt</option>
<option value="2-Kupe" >Kupé</option>
               
<option value="3-Sommerbio" >Café Sommerbio</option>
<option value="3-Jazzhouse" >Jazzhouse</option>
<option value="3-RosieMcgee" >Rosie Mcgee</option>
<option value="3-Zeze" >Zeze</option>
               
<option value="4-Biografen" >Café Biografen</option>
<option value="4-Froggys" >Café Froggys</option>
<option value="4-CuckoosNest" >Cuckoo's Nest</option>
<option value="4-FranckA" >Franck A</option>
                  </select>
Avatar billede psykochicken Nybegynder
15. september 2006 - 21:06 #1
kig evt. på http://roenving.users.whitehat.dk/ - multiple selects.

/psc
Avatar billede kejej Nybegynder
18. september 2006 - 12:45 #2
Jeg kan ikke 'fange' koden på den side :(
Avatar billede horsmark Nybegynder
18. september 2006 - 13:07 #3
så får du den her:

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

</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>

Tre afhængige selects:&nbsp;&nbsp;&nbsp;
<select name="sel3" id="sel3" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected>Vis alle</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel4" id="sel4" onchange="createOpts(this,'sel3','sel4','sel5');">
<option value="" selected>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select name="sel5" id="sel5">
<option value="" selected
>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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><!-- WebWriter AutoDato -->Sidste opdatering  12.08.2003<!-- WW --></h6>
</body>
</html>
Avatar billede psykochicken Nybegynder
18. september 2006 - 13:22 #4
...jeg har klippet lidt i koden....ret selv resten til:

<!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 name="Generator" content="Microsoft FrontPage 5.0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<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 = [
    ["Aalborg",[
        ["Café Ministeriet",],
        ["Café Vesterå",],
        ["Hr Nielsen",],
        ["Saltlageret",]]],
    ["Århus",[
        ["valg 1",],
        ["valg 2",],
        ["valg 3",],
        ["valg 4",]]],
    ["København",[
        ["valg 1",],
        ["valg 2",],
        ["valg 3",],
        ["valg 4",],
        ["valg 5",]]],
    ["Odense",[
        ["valg 1",],
        ["valg 2",],
        ["valg 3",],
        ["valg 4",],
        ["valg 5",]]]

];
//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 --";
        }
    }
}
  </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:&nbsp;&nbsp;&nbsp;By:
<select name="sel1" id="sel1" onchange="createOpts(this,'sel1','sel2');">
<option value="" selected>Vis alle</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Cafe:&nbsp;
<select name="sel2" id="sel2">
<option value="" selected
>&lt;-- Vælg --</option>
</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br><br>

</form>
<br><br>
</div>
</body>
</html>

/psc
Avatar billede kejej Nybegynder
19. september 2006 - 11:39 #5
Mange tak til jer begge :D

Vil I smide et svar begge to?
Avatar billede horsmark Nybegynder
19. september 2006 - 12:20 #6
svar herfra :-)
Avatar billede psykochicken Nybegynder
19. september 2006 - 15:44 #7
oki ;o)
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