---

Jeg har flere steder set denne funktion, at når man har valgt et punkt i en
rullemenu, så styrer dette valg, hvad der er af valgmuligheder i en
efterfølgende rullemenu. Det kan f.eks. ses her, hvor valg af af
afrejse-sted påvirker mulige destinationer:

http://www.easyjet.com/en/book/index.asp

Der bruges et javascript, og jeg har downloadet siden og forsøgt at finde ud
af, hvordan det er lavet. Men uden succes, indtil videre.

Kan nogen henvise til et sted, hvor dette script - gerne i en simpel
udgave - er tilgængeligt og evt. forklaret?

v.h.
Jakob Munck

---

Jakob Munck skrev:

> Der bruges et javascript, og jeg har downloadet siden og forsøgt at finde ud
> af, hvordan det er lavet. Men uden succes, indtil videre.

Den er også svær at gennemskue ud fra deres kildekode.

> Kan nogen henvise til et sted, hvor dette script - gerne i en simpel
> udgave - er tilgængeligt og evt. forklaret?

Jeg har heller ikke prøvet det før, men fik lige lyst til at lege lidt
med det og kom frem til dette *meget* simple resultat:
http://www.hitsurf.dk/htmltest/selectboxtest.php

Forklaring:
Jeg har tildelt de to selectbokse et ID, for en nemheds skyld kaldt
"fra" og "til".

Javascriptet henter værdien af "fra" og bestemmer værdien af "fra" ud
fra dette.

Min fornemmelse siger mig at du godt kan gennemskue koden, men ellers må
du bare spørge løs.



--
Philip - http://chartbase.dk

---

Philip Nunnegaard skrev:

> Javascriptet henter værdien af "fra" og bestemmer værdien af "fra" ud
> fra dette.

Der skulle stå:
Javascriptet henter værdien af "fra" og bestemmer
værdien af "til" ud fra dette.


--
Philip - http://chartbase.dk

---

Philip Nunnegaard forklarede:
> Philip Nunnegaard skrev:
>
>> Javascriptet henter værdien af "fra" og bestemmer værdien af "fra" ud fra
>> dette.
>
> Der skulle stå:
> Javascriptet henter værdien af "fra" og bestemmer
> værdien af "til" ud fra dette.

select er eet af de få elementer, hvis indohold ikke kan ændres med
innerHTML - man er nødt til at brug DOM, for at ændre indholdet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Fandt lige et eksempel...

Det fylder en select med options.
Faktisk er det en del af et AJAX kald, texts er den tekst der
returneres af kaldet.
texts består af een linie for hver option, der skal være i selecten.
Hver linie består af 3 elementer : teksten der skal vises i option, en
class for den aktuelle option, og en value, der skal returneres, hvis
denne option vælges.
( Og det kan sikkert gøres på andre måder - men det var det eksempel
jeg lige kunne finde).
Har indsat lidt kommentarer - håber det er forståeligt.

function FillImgSel( texts) {
   var opt_elm = document.getElementById( 'ret_img');
// opt_elm er faktisk select elementet ...
   if ( opt_elm) {
      while ( opt_elm.firstChild) {
// fjerner alle eksisterende options
       opt_elm.removeChild( opt_elm.firstChild);
         }
      var elms = texts.split( '\n');
// elms er et array, der indeholder linierne returneret fra AJAX
// altså een linie for hver option der ønskes i selecten
      for ( idx = 1; idx < elms.length; idx++) {
// for hver linie - hvert element i elms
         var dta = elms[ idx].split( ';');
// dta er et array, der indeholder de tre "værdier"
// - tekst, class og value
         if ( dta[ 0] != '') {
            var op = document.createElement( "option");
// op er et nyt option element
            opt_elm.appendChild( op);
// som indsættes i select elementet
            op.innerHTML = dta[ 0]; // tekst der vises
            op.className = dta[ 1]; // class
            op.setAttribute( 'value', dta[ 2]); // value
            }
         }
      opt_elm.selectedIndex = elms[ 0];
      }
   }

Og ja, det virker - bruges til at vælge billede for retten på admin
siden på varmeretter.dk (Der er vist noget med at farverne på options
ikke rigtigt virker efter hensigten i FF)
Det ser farligt uforståeligt ud. Hvis det er ren volapyk, kan jeg nok
godt få tid til et mere overskueligt eksempel, men ikke før i morgen en
gang...


Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

>
> Jeg har heller ikke prøvet det før, men fik lige lyst til at lege lidt med
> det og kom frem til dette *meget* simple resultat:
> http://www.hitsurf.dk/htmltest/selectboxtest.php
>

Jo, tak, men dit scrip virker bare ikke. Det skal jo være sådan, at når man
vælger et afrejsested i den øverste drop-down menu, så skifter indholder i
den nederste drop-down menu i forhold til dette valg. Og sådan fungere din
kode ikke. Her bliver den nederste drop-down menu tom, så snart man vælger
noget i den øverste, og det gør ingen forskel om man vælger noget andet. Den
nederste forbliver tom.

Der er altså noget galt, og det har jeg på fornemmelsen at man kun kan løse
med noget Javascript. Men hvor findes man lige dette script?

v.h.
Jakob

---

Jakob Munck skrev:

> Der er altså noget galt, og det har jeg på fornemmelsen at man kun kan løse
> med noget Javascript. Men hvor findes man lige dette script?

Det var skam javascript.
Men se Birgers indlæg for en mere korrekt metode.

Mit script virkede fint i min browser (Firefox), men jeg kan nu se at
det ikke virker i IE8.

<offtopic>
Jeg har en tendens til at tro at hvis noget virker i Firefox og Opera,
virker det også i IE. Det var den oplevelse jeg havde for bare et par år
siden.
</offtopic>

--
Philip - http://chartbase.dk

---

Tak til alle for hjælp. Jeg ledte på nettet og fandt, efter omfattende test,
et script, som jeg synes virker godt til formålet. Det gengiver jeg he
nedenfor (som det ser ud efter at jeg har puttet data ind i det::

------------------------------------------------------------------------------------
I head:
<script language="javascript" src="scripts/list.js"></script>

Formen:
<SELECT NAME="vej" onChange="SelectSubCat();" >
<Option value="">Vej</option>
</SELECT>&nbsp;

<SELECT id="SubCat" NAME="Nummer">
<Option value="10000">Nummer</option>
</SELECT>
-------------------------------------------------------------------------------------
Javascript, som includeres:

function fillCategory(){
// this function is used to fill the category list on load
addOption(document.membership.vej, "Banholmvej", "Banholmvej", "");
addOption(document.membership.vej, "Hansstedvej", "Hansstedvej", "");
addOption(document.membership.vej, "Maribovej", "Maribovej", "");
addOption(document.membership.vej, "Nakskovvej", "Nakskovvej", "");
addOption(document.membership.vej, "Nystedvej", "Nystedvej", "");
addOption(document.membership.vej, "Rødbyvej", "Rødbyvej", "");
addOption(document.membership.vej, "Sakskøbingvej", "Sakskøbingvej", "");
addOption(document.membership.vej, "Vigerslevvej", "Vigerslevvej", "");
}

function SelectSubCat(){
// ON selection of vej this function will work
removeAllOptions(document.membership.SubCat);
addOption(document.membership.SubCat, "", "Nummer", "");

if(document.membership.vej.value == 'Banholmvej'){
addOption(document.membership.SubCat,"2", "2");
addOption(document.membership.SubCat,"4", "4");
addOption(document.membership.SubCat,"11", "11");
addOption(document.membership.SubCat,"12", "12");
}

if(document.membership.vej.value == 'Hansstedvej'){
addOption(document.membership.SubCat,"1", "1");
addOption(document.membership.SubCat,"3", "3");
addOption(document.membership.SubCat,"4", "4");
}

if(document.membership.vej.value == 'Maribovej'){
addOption(document.membership.SubCat,"2", "2");
addOption(document.membership.SubCat,"4", "4");
addOption(document.membership.SubCat,"28", "29");
addOption(document.membership.SubCat,"30", "30");
}

if(document.membership.vej.value == 'Nakskovvej'){
addOption(document.membership.SubCat,"75", "75");
addOption(document.membership.SubCat,"113", "113");
addOption(document.membership.SubCat,"114", "114");
addOption(document.membership.SubCat,"146", "146");
addOption(document.membership.SubCat,"148", "148");
addOption(document.membership.SubCat,"150", "150");
}

if(document.membership.vej.value == 'Nystedvej'){
addOption(document.membership.SubCat,"28", "118");
addOption(document.membership.SubCat,"55", "142");
addOption(document.membership.SubCat,"57", "144");
addOption(document.membership.SubCat,"59", "146");
}

if(document.membership.vej.value == 'Rødbyvej'){
addOption(document.membership.SubCat,"2", "2");
addOption(document.membership.SubCat,"3", "3");
addOption(document.membership.SubCat,"7", "7", "");
}

if(document.membership.vej.value == 'Sakskøbingvej'){
addOption(document.membership.SubCat,"1", "1");
addOption(document.membership.SubCat,"2", "2");
addOption(document.membership.SubCat,"6", "6", "");
}

if(document.membership.vej.value == 'Vigerslevvej'){
addOption(document.membership.SubCat,"59 A", "59 A");
addOption(document.membership.SubCat,"59 B", "59 B");
addOption(document.membership.SubCat,"103", "103");
addOption(document.membership.SubCat,"105", "105");
}
}

function removeAllOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
//selectbox.options.remove(i);
selectbox.remove(i);
}}

function addOption(selectbox, value, text )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
--------------------------------------------------------------------------

Ovenstående script virker perfekt i IE, så det holder jeg mig til. Jeg siger
igen mange tak for jeres forslag, som jeg har hentet inspiration fra.

v.h.
Jakob

---

Jakob Munck skrev:
> Tak til alle for hjælp. Jeg ledte på nettet og fandt, efter omfattende test,
> et script, som jeg synes virker godt til formålet. Det gengiver jeg he
> nedenfor (som det ser ud efter at jeg har puttet data ind i det::
>
> ------------------------------------------------------------------------------------
> I head:
> <script language="javascript" src="scripts/list.js"></script>
>

<snip-snip>

> --------------------------------------------------------------------------
>
> Ovenstående script virker perfekt i IE, så det holder jeg mig til. Jeg siger
> igen mange tak for jeres forslag, som jeg har hentet inspiration fra.

Ifald man skulle have brug for det ville det
være vældig rart med et link til list.js ...


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

>
> Ifald man skulle have brug for det ville det
> være vældig rart med et link til list.js ...
>
>

Hvorfor det? Hele koden, incl. list.js, er gengivet i mit indlæg under
"Javascript, som includeres":


v.h.
Jakob