Avatar billede dramsgaard Nybegynder
10. januar 2011 - 22:38 Der er 7 kommentarer og
1 løsning

Dropdown indhold baseret på valg i anden dropdown boks

Jeg har brug for at kunne styre indholdet af nogle dropdown bokse baseret på brugerens valg i andre dropdown bokse (faktisk på samme måde som når der skal vælges kategori her på Exp.dk når der skal oprettes et spørgsmål). Jeg kan godt lave det på serversiden vha. ASP, men vil meget gerne have det til at køre hos brugeren i stedet. Da jeg ikke er en haj til JavaScript har jeg brug for lidt hjælp.

Konkret:
I min database har jeg 4 tabeller med flg. relevante kolonner:

Verdensdel | Land          | Region      | Distrikt
------------------------------------------------------------
Id                  | Id                | Id                  | Id
Navn            | Navn          | Navn            | Navn
                      | ID_Parent | ID_Parent  | ID_Parent

Tabellerne er relateret gennem 'Id' og 'ID_parent'.

Hver tabel skal udskrives i hver deres dropdown boks.
Dvs. at hvis der f.eks. i dropdown boks for 'Verdensdel' vælges 'Vesteuropa' med Id=2 i tabellen 'Verdensdel', skal næste dropdown boks for 'Land' kun vise de poster fra tabellen 'Land' der har ID_Parent = 2. Samme procedure skal gentages for 'Region' og endelig for Distrikt.
Dvs. indhold af dropdown i 'Distrikt' er afhængig af valg i 'Region' som er afhængig af 'Land' som endelig er afhængig af 'Verdensdel'.

Umiddelbart tænker jeg, at det er muligt at udskrive posterne i et array for hver tabel i databasen som en funktion i JavaScript efterfølgende kan loope igennem når der ændres i en af dropdown boksene.

Håber det er til at forstå - ellers så spørg løs!

Nogen der har et bud på hvordan det kan løses??
Avatar billede nissen2630 Novice
10. januar 2011 - 23:56 #1
Avatar billede olsensweb.dk Ekspert
11. januar 2011 - 00:03 #2
du skal have fat i AJAX
læs denne tut
http://www.w3schools.com/ajax/default.asp (asp og php eks)
http://www.w3schools.com/asp/asp_ajax_intro.asp (kun asp eks)
http://www.w3schools.com/php/php_ajax_intro.asp (kun php eks)

jeg har lavet noget tilsvarende i tidernes morgen med php som serversprog, men kig evt. på det og lad dig inspirerer
demo    http://olsensweb.dk/guides/ajax/eks2/
source  http://olsensweb.dk/guides/ajax/eks2/eks2.zip
anvender en MySql db og PHP
Avatar billede dramsgaard Nybegynder
11. januar 2011 - 11:57 #3
Tak for svarene

Jeg kendte ikke til AJAX i forvejen - men det ser meget interessant ud. Jeg vil se lidt nærmere på det i aften.
Avatar billede olsensweb.dk Ekspert
11. januar 2011 - 15:42 #4
>men det ser meget interessant ud.
der er interessant, jeg er blevet helt vild med det :)

jeg har lige flækket et eks sammen der ligner din opgave
mine tabeller er dog prefixet med tbl_, og mine fremmednøgler hedder altid fremmed tabelnavnid, uden tbl_
du må selv tilpasse db kaldene til ASP i index og reuqest filen, og selvføgelig rette fil ext

demo  http://olsensweb.dk/test/experten/spm/928584/
source http://olsensweb.dk/test/experten/spm/928584/eks2_1.zip
Avatar billede dramsgaard Nybegynder
11. januar 2011 - 17:57 #5
Jeg har selv siddet og leget lidt med det, men jeg får en syntax fejl (uden nærmere angivelse) når jeg kører scriptet - kan du evt se hvor fejlen er?
Hvis jeg vælger noget i dropdown for verdensdel, kan jeg godt få output frem i dropdown for land, men herefter ikke mere. Jeg har klippet det relevante kode ud nedenunder

function UpdateSelect(str, str2, str3)
{// str1 = ID_parent, str2 = Id for span, str3 = tabelnavn/id på select
if (str.length==0)
  {
  document.getElementById(str2).innerHTML="";
  return;
  }

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(str2).innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ASPselect.asp?str1="+str+"&str2="+str2+"&str3="+str3+"&rand="+Math.random(),true);
xmlhttp.send();
}

------ formular -----------

<select name="Verdensdel" id="Verdensdel" onChange="UpdateSelect(this.value, 'span_Land', 'Land')">
<option value="">Alle</option>
<%set rs= MyConn.Execute("SELECT ID, navn FROM Verdensdel ORDER BY Navn ASC")
  While not rs.eof%>
<option value="<%=rs("ID")%>"><%=rs("navn")%></option>
<%rs.MoveNext
  wend%>
</select>

<span id="span_Land">
<select name="Land" id="Land">
<option value="">Alle</option>
</select>
</span>

<span id="span_Region">
<select name="Region" id="Region">
<option value="">Alle</option>
</select>
</span>

<span id="span_Distrikt">
<select name="Distrikt" id="Distrikt">
<option value="">Alle</option>
</select>
</span>


-----------FIL: ASPselect.asp-------------------

response.expires=-1
dim ID_parent, ID_span, tabel, varOut


ID_parent = request.QueryString("str1")
ID_span = request.QueryString("str2")
tabel = request.QueryString("str3")

varOut = "<select name='"&tabel&"' id='"&tabel&"' onChange='UpdateSelect(this.value, '"&ID_span&"', '"&tabel&"')'><option value=''>Alle</option> "

if ID_parent<>"" then%>
  <!--#include file="inc_dbConn.asp"-->
  <%
  set rs = MyConn.Execute("SELECT id, navn, ID_Parent FROM "&tabel&" WHERE ID_Parent="&ID_Parent&" ORDER BY navn ASC")
  While not rs.eof

    varOut = varOut & "<option value='"&rs("ID")&"'>"&rs("navn")&"</option> "

  rs.MoveNext
  Wend

CleanUp(RS)
end if

varOut=varOut&" </select>"

response.write varOut
Avatar billede dramsgaard Nybegynder
11. januar 2011 - 22:21 #6
jeg har forresten fundet fejlen - så smid et svar, så får du point :-)
Avatar billede olsensweb.dk Ekspert
11. januar 2011 - 22:35 #7
>jeg har forresten fundet fejlen - så smid et svar, så får du point :-)
herligt hvad var fejlen ??
jeg sidder og er ved at blive grå håret :)
prøver at gennemskue hvordan du får dannet
<select name="Land" id="Land" onChange="UpdateSelect(this.value, 'span_Region', 'Region')">

hvordan bliver navnet span_Region og Region dannet ??, de skulle jo komme over i ASPselect.asp som str2 og str3
Avatar billede dramsgaard Nybegynder
12. januar 2011 - 09:38 #8
Første fejl er, at det er for længe siden jeg sidst har leget med alt det her web scripting - så jeg havde glemt, at man skal passe lidt på med om man bruger ' eller " når man blander ASP og javaScript sammen.

>> jeg sidder og er ved at blive grå håret

Heh ja det kan jeg godt forstå - det var den anden fejl. Jeg har lavet en lille work around efterfølgende inde i ASPselect.asp for at få det til at virke.

I forhold til dit script, har jeg prøvet at putte lidt flere variabler ind for at kunne genbruge mere af koden (og derved skulle den blive mere fleksibel at bruge i  andre situationer - var tanken). - Men jeg kan dog godt se, at det er en meget smart måde du har bygget dit script op på, da det derved tager højde for, at nulstille de underordnede dropdown bokse hvis der ændres i en overordnet dropdown boks efterfølgende - så jeg bliver måske nok nødt til at gi' mig der :-).

Må sige, at det AJAX sgu egentlig er meget smart - kan ihvertfald se mange situationer, hvor jeg tror det vil kunne spare mig for mange besværligheder (og reloads af siden). Det eneste jeg tænker er, at det må kunne være en belastning for serveren (på store websider) at skulle behandle en masse kald hele tiden (f.eks. i forbindelse med en søgefunktion hvor der fremkommer forslag mens brugeren skriver).
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