Avatar billede moddi100 Seniormester
25. juni 2008 - 22:00 Der er 12 kommentarer og
1 løsning

Selectværdier afhænger af andet selectvalg

Hej

Jeg har to selectbokse. Den ene indeholder emner, den anden underemner.
Hvordan kan jeg få selectboks 2 til kun at vise underemnerne til det valgte emne?

Med venlig hilsen
Morten
Avatar billede thesurfer Nybegynder
25. juni 2008 - 22:01 #1
Avatar billede moddi100 Seniormester
25. juni 2008 - 22:17 #2
jeg kan ikke se koden....
Avatar billede thesurfer Nybegynder
25. juni 2008 - 22:27 #3
Det er fordi roenving (en bruger her på Eksperten) er en doven hund.. :-)

Som der står på siden, skal man kigge i kildekoden for at se koden.. og så bruger han frames.. :-)

Her er hele kildekoden til siden med select-boksene:


<!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="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 thesurfer Nybegynder
25. juni 2008 - 22:28 #4
PS: Jeg har fjernet koden der redirecter til index filen.. så nu kan man gemme koden i en fil, og få lov til at se siden..
Avatar billede roenving Novice
26. juni 2008 - 01:46 #5
Og hvis du kun har to selects, er det vildt overkill at bruge ovenstående, kig f.eks. på diskussionen i http://www.eksperten.dk/spm/836128, eller gå direkte til eksemplet i http://www.eksperten.dk/spm/615326 !-)
Avatar billede moddi100 Seniormester
26. juni 2008 - 14:17 #6
okay, det er nu lykkedes mig at lave selve funktionen og få den til at virke, sådan da. Jeg har brugt følgende kode:

<script type="text/javascript">
var modeller = new Array();
modeller[modeller.length] = ["valg1", "valg2"];

function visModeller(elm){
  var sel = elm.form.model;
  if(elm.selectedIndex==0){
    sel.options.length=1;
  }else{
    sel.length = 1;
    var arrNum = elm.selectedIndex-1;
    for(i=0;modeller[arrNum].length>i;i++){
      sel.options[sel.length] = new Option(modeller[arrNum][i]);
    }
  }
</script>

Når jeg nu tilføjer en ny option, skal der selvfølgelig også tilknyttes en værdi. Jeg ved det gøres med

new Option(modeller[arrNum][i], value)


Men hvordan kan jeg lave koden om, så arrayet ser sådan ud:

modeller[modeller.length] = ["valg1" => "value1", "valg2" => "value2"];

og at koden ændres, så når der skal laves en ny option, tager den arraykey'en som tekst og arrayvalue'en som værdi?
Avatar billede roenving Novice
26. juni 2008 - 14:29 #7
Det kan løses på flere måder, en simpel model vil være at have de to værdier adskilt af et tegn i de enkelte vlgmuligheder, f.eks.:

var models = new Array();
models[models.length] = ["234,234t","235,235t","224,224t","24,24t","4,4t","5,5t"];
models[models.length] = ["245,245t","247,247t","C23,c23t","Q13,q13t","645,645t"];
models[models.length] = ["323,323t","626,626t","929,929t"];

function showModels(elm){
  elm.form.text.style.display = 'none';
  var sel = elm.form.select2;
  if(elm.selectedIndex==0){
    sel.style.display = 'none';
  }else{
    sel.length = 1;
    var arrNum = elm.selectedIndex-1,tVal;
    for(i=0;models[arrNum].length>i;i++){
      tVal = models[arrNum][i].split(",");
      sel.options[sel.length] = new Option(tVal[0],tVal[1]);
      sel.style.display = 'inline';
    }
  }
}
Avatar billede moddi100 Seniormester
26. juni 2008 - 15:48 #8
smid et svar, så er der point
Avatar billede moddi100 Seniormester
26. juni 2008 - 16:16 #9
kom lige til at tænke på, at det nok ikke er den smarteste måde.

Værdien af selectboksen skal være den samme som det der vises. Et andet felt, skal derimod vise det der før var værdien.

Altså selectboksen viser 'Model1', selectboksens value skal være det samme.
Et andet felt, viser så 'Value1', altså Model1's oprindelige værdi.

Hvordan kan jeg lave det? Hvis jeg nu beholder arrayet fra før?
Avatar billede moddi100 Seniormester
26. juni 2008 - 17:21 #10
lige meget fandt ud af det. Bare smid et svar roenving
Avatar billede roenving Novice
27. juni 2008 - 00:59 #11
Oki '-)
Avatar billede moddi100 Seniormester
27. juni 2008 - 14:58 #12
Og tak for hjælpen til begge to
Avatar billede roenving Novice
28. juni 2008 - 11:36 #13
-- og jeg takker for point ;~}
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