Forms og onchange (måske)

Det kan godt laves med en onchange, men det vil højest sandsynligt være et lidt større script end du nok lige regner med.

Det jeg ville gøre er at et array med lande, for hvert land laver du så et array igen med byer fra landet.

ex:
var arr_lande = new Array("Danmark","Norge","Sverige","Tyskland");
// Byer for Danmark
var arr_byer[0] = new Array("København","Aarhus","Odense","Aalborg");

Hvis du har fået fat i idéen i systemet.

Så når du vælger land, skal der køres en ONCHANGE() der looper det passende array igennem og enten udskriver vha. "appendChild" metoden, eller simpelthen laver hele html koden og udskriver det til et element igennem "document.getElementById(element-id).innerHTML"

Lad mig give et eksempel:

// Din HTML Form
<select name="land" onchange="hentByer(this.id)">
  <option value="0">Danmark</option>
  <option value="1">Norge</option>
  <option value="2">Sverige</option>
  <option value="3">Tyskland</option>
</select>

// JavaScript funktionen "hentByer(id,maal)"
function hentByer(id,maal) {
  // Her angiver vi en variabel til det passende BY array
  var byArray = arr_byer[id];
 
  // Her looper vi så array'et igennem og gemmer byerne i én string
  var byString = "<select name=\"byer\">";
  for(i=0; i<byArray.length; i++) {
    byString = byString + "<option value=\"" byArray[i] + "\">" + byArray[i] + "</option>";
  }
  byString = byString + "</select>";

  // Looper er færdigt, så vi putter vores string med alle byerne ind i et element
  document.getElementById("vis_byer").innerHTML = byString;
}


// Din HTML Side
<span id="vis_byer"></span>



Prøv det af, det er kun et eksempel, ikke testet af, men skulle give dig en idé til en måde du kan gøre det på.. det måske ikke den nemmeste eller smarteste, men burde virke :-)

hov, jeg kan allerede se 2-3 fejl jeg lavede i scriptet...

  <select name="land" onchange="hentByer(this.id)">
skal ændres til
  <select name="land" onchange="hentByer(this.id,'vis_byer')">

og
  document.getElementById("vis_byer").innerHTML = byString;
skal ændres til
  document.getElementById(maal).innerHTML = byString;


så burde det forhåbentligt virke.

Arhg, for helvete da jeg sover jo max...

der hvor jeg har skrevet "this.id" skal være "this.value"
ellers får du ikke rigtig noget data ind i dit javascript...

ja, det var noget mere end jeg regnede med. jeg prøver det lige igennem.

Kan det gøres lettere i php evt.?

At begynde at koble JavaScript og PHP sammen er nok bare mere forvirrende.
Og i sidste ende er det præcis samme kode der skal laves i PHP hvis det var.
Men altså prøve selve idéen i systemet af, og så må du jo bare sætte det op efter hva der behager dig.

Held og lykke med det.

Det skal laves på stort set præcis samme måde i PHP, så det bliver koden ikke mindre af. Derudover kan man ikke køre PHP-koder  uden at loade siden igen, med mindre man bruger JavaScript (AJAX), og så får du for alvor en stor kode.

JavaScript kan naturligvis ikke regne ud, hvilke byer der er danske eller tyske, medmindre du fortæller den det, ligesom Roxki gør med nogle Arrays, så det kan ikke være meget anderledes.

Og så synes jeg i øvrigt, Roxkis kode er meget lille i betragtning af, hvad det skal klare, så det er nok den bedste løsning. Især hvis du fjerner kommentarerne, så kan du se, hvor få kommandoer, der er.

Min eneste indvending er dog, at jeg klart ville fraråde brugen af innerHTML og i stedet foreslå, at koden brugte gyldige DOM-metoder, såsom f.eks. appendChild, som Roxki selv foreslår. Det giver et par linjer ekstra kode, men din kode bliver valid, og du vil kunne bruge den under XHTML også - med meget få modifikationer.

innerHTML derimod vil overhovedet ikke kunne virke under XHTML 2.0, når browserne engang understøtter det.

Det har du helt ret i w13, men hvis den kode jeg skrev virker stor og forvirrende, ved jeg ikke helt om jeg selv ville springe ud i appendChild og lign. kommandoer, da jeg selv syntes det er noget mere indviklet at arbejde med end bare at generer en alm. html kode og smide den ind i med innerHTML ;o)
På den anden side, kan man lige så godt lærer det nyeste og bedste fra starten, og så slipper man jo nok med nogle læretimer i længden!

<ole>

Ja, DOM er 'det nyeste' af de to, men ikke mere end et års tid yngre end innerHTML (små 10 år), så det er vist på tide at få det lært  ;o)

/mvh
</bole>

-- og et simpelt eksempel som ligner roxkis kraftigt kan ses i denne tråd: http://www.eksperten.dk/spm/615326 !-)

Jeg er i tvivl om hvor jeg skal placere

<span id="vis_byer"></span>

Der hvor byernes select-boks skal vises, når man har valgt land. =)

Sådan?:
<td>Bynavn:</td>
<td><select name="Bynavn"  id="Bynavn">
<span id="vis_by"></span>
</select></td>

Viser ingen byer.

Nej, selve <select ...> og </select> bliver også indsat i span'en og det er iøvrigt helt umuligt at smide en span ind i en select.

<td>Bynavn:</td>
<td>
<span id="vis_by"></span>
</td>

Det er i hvert fald sådan, jeg har forstået roxki's kode, men nu ved jeg jo heller ikke, om han har testet den.

hmm, virker ikke

Ok, så er der vel en fejl i koden.

Går ikke ud fra, der er nogle fejlmeddelelser, siden du ikke nævner nogen?

Heller ikke i FireFox's fejlkonsol?

Jo, det gik lidt for hurtigt.

Fejlen er i første linie herunder:
<select name="land" onchange="hentByer(this.id,'vis_byer')">
  <option value="0">Danmark</option>
  <option value="1">Norge</option>
  <option value="2">Sverige</option>
  <option value="3">Tyskland</option>
</select>

Fejlen kunne måske være this.id, når selecten ikke har noget id. :)

Læg lige id="land" på selecten også.

Ellers skal jeg bruge fejlbeskeden også og ikke kun linjenr. =)

Jeg fandt fejlen, en lille tastefejl.

Point til roxki for koden, og mange tak for andres input.

Hvad var fejlen så?

Jeg havde selv lavet en tastefejl da jeg tilføje i koden.

Det var så lidt hrole, håbede også du fik fat i alle mine små ændringer jeg opdagede efter jeg fik skrevet selve koden.