Avatar billede starleicht Nybegynder
10. januar 2002 - 13:19 Der er 13 kommentarer og
1 løsning

dynamiske dropdown menuer

Kan man on-the-fly danne en (multiple) dropdown-liste udfra valg i en anden (multiple) dropdown-liste?

EKS:

Menu1:
-------------
Planlov(PL)
Miljøbeskyttelseslov(MBL)
Naturbeskyttelseslov(NBL)

Hvis PL vælges i menu1 dannes menu2 udfra dette valg

Menu2:
-------------
§35 (PL)
§6 (PL)
§8 (PL)

Hvis PL og MBL vælges i menu1 dannes menu2 on-the-fly som foreningsmængden af PL og MBL.

Menu2:
-------------
§35 (PL)
§6 (PL)
§8 (PL)
§15 (MBL)
§16 (MBL)

Hvis PL fravælges og MBL og NBL vælges i menu1 dannes menu2 on-the-fly som foreningsmængden af MBL og NBL.

Menu2:
-------------
§15 (MBL)
§16 (MBL)
§9 (NBL)
§12 (NBL)
§14 (NBL)
§25 (NBL)

O.S.V................

Har jeg forklaret mig godt nok?
Avatar billede starleicht Nybegynder
10. januar 2002 - 13:40 #1
Dette er et eksempel med alm. dropdown til inspiration:
http://home01.wxs.nl/~serry003/javascript/select.html
Avatar billede ras2000 Nybegynder
10. januar 2002 - 17:07 #2
Denne lidt uskønne kode kan klare det.
<html>
<head>
<script>
var stateNames=new Array();
var valg = new Array();
stateNames[\"none\"]=new Array(\"Choose a country first\")
stateNames[\"USA\"]=new Array(\"Alabama\",\"Alaska\",\"Arizona\",\"Arkansas\",\"California\",\"Colorado\",\"Connecticut\",\"Delaware\",\"Florida\",\"Georgia\",\"Hawaii\",\"Idaho\",\"Illinois\",\"Indiana\",\"Iowa\",\"Kansas\",\"Kentucky\",\"Louisiana \",\"Maine\",\"Maryland\",\"Massachusetts\",\"Michigan\",\"Minnesota\",\"Mississippi\",\"Missouri\",\"Montana\",\"Nebraska\",\"Nevada\",\"New Hampshire\",\"New Jersey\",\"New Mexico\",\"New York\",\"North Carolina\",\"North Dakota\",\"Ohio\",\"Oklahoma \",\"Oregon\",\"Pennsylvania\",\"Rhode Island\",\"South Carolina\",\"South Dakota\",\"Tennessee\",\"Texas\",\"Utah\",\"Vermont\",\"Virginia\",\"Washington\",\"West Virginia\",\"Wisconsin\",\"Wyoming \")
stateNames[\"CAN\"]=new Array(\"Newfoundland \",\"Nova Scotia \",\"New Brunswick \",\"Prince Edward Island \",\"Quebec \",\"Ontario \",\"Manitoba \",\"Saskatchewan \",\"Alberta \",\"British Columbia \",\"Nunavut \",\"Northwest Territories \",\"Yukon Territory\")
stateNames[\"AUS\"]=new Array(\"Australian Capital Territory\",\"New South Wales\",\"Northern Territory\",\"Queensland\",\"South Australia\",\"Tasmania\",\"Victoria\",\"Western Australia\")
function fillStates(el){
b = 0;
for (a = 0; a < el.all.length; a++){
    if (el.all(a).selected == true){
        valg[b] = el.all(a).value;
        b++;
    }
}
s=document.f.states.options
b = 0;
s.length=0
for (c = 0; c < valg.length; c ++){
  s.length+=stateNames[valg[c]].length
  for(i=b;i<s.length;i++){
    s[i].value=stateNames[valg[c]][i-b]
    s[i].text=stateNames[valg[c]][i-b]
  }
alert(stateNames[valg[c]][0]);
  b = s.length;
}
document.f.states.selectedIndex=0
}
</script>
</head>
<body>
<form name=\"f\">
<select onchange=\"fillStates(this)\" name=countries multiple size=\"4\">
  <option value=\"none\">Pick one</option>
  <option value=\"USA\">United States</option>
  <option value=\"CAN\">Canada</option>
  <option value=\"AUS\">Australia</option>
</select>
<select name=states>
  <option>Choose a country first</option>
  <option></option>
  <option></option>
  <option></option>
  <option></option>
</select>
</form>
</body>
</html>
Avatar billede ras2000 Nybegynder
10. januar 2002 - 17:08 #3
Hov, du kanb slette alert(.. linien, den var bare til at teste med.
Avatar billede ras2000 Nybegynder
10. januar 2002 - 17:13 #4
Et par fejl iden, prøv det her.
<html>
<head>
<script>
var stateNames=new Array();
stateNames[\"none\"]=new Array(\"Choose a country first\")
stateNames[\"USA\"]=new Array(\"Alabama\",\"Alaska\",\"Arizona\",\"Arkansas\",\"California\",\"Colorado\",\"Connecticut\",\"Delaware\",\"Florida\",\"Georgia\",\"Hawaii\",\"Idaho\",\"Illinois\",\"Indiana\",\"Iowa\",\"Kansas\",\"Kentucky\",\"Louisiana \",\"Maine\",\"Maryland\",\"Massachusetts\",\"Michigan\",\"Minnesota\",\"Mississippi\",\"Missouri\",\"Montana\",\"Nebraska\",\"Nevada\",\"New Hampshire\",\"New Jersey\",\"New Mexico\",\"New York\",\"North Carolina\",\"North Dakota\",\"Ohio\",\"Oklahoma \",\"Oregon\",\"Pennsylvania\",\"Rhode Island\",\"South Carolina\",\"South Dakota\",\"Tennessee\",\"Texas\",\"Utah\",\"Vermont\",\"Virginia\",\"Washington\",\"West Virginia\",\"Wisconsin\",\"Wyoming \")
stateNames[\"CAN\"]=new Array(\"Newfoundland \",\"Nova Scotia \",\"New Brunswick \",\"Prince Edward Island \",\"Quebec \",\"Ontario \",\"Manitoba \",\"Saskatchewan \",\"Alberta \",\"British Columbia \",\"Nunavut \",\"Northwest Territories \",\"Yukon Territory\")
stateNames[\"AUS\"]=new Array(\"Australian Capital Territory\",\"New South Wales\",\"Northern Territory\",\"Queensland\",\"South Australia\",\"Tasmania\",\"Victoria\",\"Western Australia\")
function fillStates(el){
b = 0;
var valg = new Array();
for (a = 0; a < el.all.length; a++){
    if (el.all(a).selected == true){
        valg[b] = el.all(a).value;
        b++;
    }
}
s=document.f.states.options
b = 0;
s.length=0
for (c = 0; c < valg.length; c ++){
  s.length+=stateNames[valg[c]].length
  for(i=b;i<s.length;i++){
    s[i].value=stateNames[valg[c]][i-b]
    s[i].text=stateNames[valg[c]][i-b]
  }
  b = s.length;
}
document.f.states.selectedIndex=0
}
</script>
</head>
<body>
<form name=\"f\">
<select onchange=\"fillStates(this)\" name=countries multiple size=\"4\">
  <option value=\"none\">Pick one</option>
  <option value=\"USA\">United States</option>
  <option value=\"CAN\">Canada</option>
  <option value=\"AUS\">Australia</option>
</select>
<select name=states>
  <option>Choose a country first</option>
  <option></option>
  <option></option>
  <option></option>
  <option></option>
</select>
</form>
</body>
</html>
Avatar billede starleicht Nybegynder
10. januar 2002 - 18:50 #5
tak
Avatar billede ras2000 Nybegynder
10. januar 2002 - 19:06 #6
Selv tak! Det ville være lækkert hvis man kunne ordne det alfabetisk(eller numerinsk) men det kunne jeg ikke lige gennemskue.
Avatar billede starleicht Nybegynder
11. januar 2002 - 11:54 #7
På nedenstående side er det muligt at vælge en eller flere elementer i venstre drop-down liste og danne højre drop-down liste udfra disse valg.

Det skal også være muligt at klikke på \"Vælg Alle\"-linket, således at alle elementer bliver markeret i venstre drop-down liste (virker fint!) men hvordan får jeg vist alle de tilhørende elementer i højre drop-down liste

http://www.leicht.dk/eksperten/dynamicForm.html
Avatar billede starleicht Nybegynder
11. januar 2002 - 11:56 #8
Når man klikker på \"Fravælg Alle\"-linket skal alle elementer i højre drop-down liste selvfølgelig også fjernes
Avatar billede ras2000 Nybegynder
11. januar 2002 - 13:05 #9
          if (tal == 1){
        for(i= 0; i<document.frm1.LovID.options.length; i++){
          document.frm1.LovID.options[i].selected= Select;}}
Avatar billede starleicht Nybegynder
11. januar 2002 - 14:08 #10
Hmm, jeg får at vide, at \'tal\' er ikke defineret
Avatar billede starleicht Nybegynder
11. januar 2002 - 14:22 #11
Hvordan vil hele den endelige kode se ud?
Avatar billede ras2000 Nybegynder
11. januar 2002 - 14:35 #12
Undskyld jeg fik absolut ikke det hele med, jeg var lige på vej ud af døren.
<html>
<head>
    <script language=\"JavaScript\"\">
        var paragraf=new Array();
        paragraf[1]=new Array(\"§35 (Planlov)\",\"§6 (VVM)\",\"§8 (VVM)\")
        paragraf[2]=new Array(\"§15 (NBL)\",\"§16 (NBL)\",\"§17 (NBL)\",\"§25 (NBL)\")
        paragraf[3]=new Array(\"§23 (MBL)\",\"§27 (MBL)\",\"§44 (MBL)\")
        function fillParagraf(el){
        b = 0;
        var valg = new Array();
        for (a = 0; a < el.all.length; a++){
            if (el.all(a).selected == true){
                valg[b] = el.all(a).value;
                b++;
            }
        }
        s=document.frm1.ParID.options
        b = 0;
        s.length=0
        for (c = 0; c < valg.length; c ++){
          s.length+=paragraf[valg[c]].length
          for(i=b;i<s.length;i++){
            s[i].value=paragraf[valg[c]][i-b]
            s[i].text=paragraf[valg[c]][i-b]
          }
          b = s.length;
        }
        document.frm1.ParID.selectedIndex=0
        }
      function VP(tal) {
        for(i= 0; i<document.frm1.LovID.options.length; i++)
          document.frm1.LovID.options[i].selected= tal;
            fillParagraf(document.frm1.LovID);
      }   
    </script>
</head>
<body>

<form name=\"frm1\">
<table>
<tr>
    <td><b>Lovområde</b><br>
    <select name=\"LovID\" multiple size=\"15\" onchange=\"fillParagraf(this)\">
      <option value=1>Planloven</option>
      <option value=2>Naturbeskyttelsesloven</option>
      <option value=3>Milljøbeskyttelsesloven</option>
    </select>
    </td>
    <td valign=\"top\"><br>
        <a href=\'java script:VP(true)\' class=\"vaelg\">Vælg alle</a><br>
        <a href=\'java script:VP(false)\' class=\"vaelg\">Fravælg alle</a>   
    </td>
    <td><b>Paragraf</b><br>
    <select multiple name=\"ParID\" size=\"15\">
      <option>Vælg først et lovområde</option>
      <option></option>
      <option></option>
      <option></option>
      <option></option>
    </select>   
    </td>
</tr>
</table>
</form>

</body>
</html>

Avatar billede starleicht Nybegynder
11. januar 2002 - 14:50 #13
Yep, det virker!
Så skal du lige svare på http://www.eksperten.dk/spm/157400 for at få pointene

MVH StarLeicht
Avatar billede ras2000 Nybegynder
11. januar 2002 - 15:00 #14
Jeg har fået rigelige points! Ellers tak...
Lægger du ikke et link til det endelige site når det kommer op? Det lyder skægt!
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