login  Naam:   Wachtwoord: 
Registreer je!
 Forum

javascript selecteren

Offline kenzo - 21/08/2007 10:52 (laatste wijziging 21/08/2007 10:53)
Avatar van kenzoPHP beginner hallo,

bij marktplaats.nl en nog een paar van die sites kun je advertenties toevoegen. Je klikt op een categorie en als je daarop geklikt hebt verschijnen meteen alle subcategorieen van die categorie.

Weet iemand zo'n script te vinden, of hoe ik zoiets "makkelijk" kan maken? (ben niet goed in javascript). ik heb eens gezocht, maar kan dat ik verkeerd zoek.


Bedankt!


owja... werk met SQL Databases

11 antwoorden

Gesponsorde links
Offline Martijn1989 - 21/08/2007 12:51
Avatar van Martijn1989 PHP ver gevorderde Je kan het best met AJAX gaan werken, als je op zo categorie een onChange (Zoiets) toepast kan je met AJAX een <div> laten tonen met de dynamische subcategorieën.
Offline kenzo - 21/08/2007 12:52
Avatar van kenzo PHP beginner kan dat op iedere server, en kan iedereen dat, of is er een speciaal programma ofzo voor nodig, en wie kan mij er dan mee helpen?
Offline BramBo - 21/08/2007 13:38 (laatste wijziging 21/08/2007 13:39)
Avatar van BramBo JS gevorderde ajax.. ajax.... Het gebruik van Ajax staat verder buiten de functies die je nodig hebt. Tuurlijk om de data op te halen kan je ervoor kiezen om dit te doen met ajax. Zelf lijkt het me n beetje overdreven, aangezien er vaak toch geen honderden categorieën zijn.

Ik zal je n opzetje geven, maar het is natuurlijk de bedoeling dat je het zelf script..

inprincipe zou het als het volgt werken.
Je hebt associatie arrays, deze zijn het zelfde opgebouwd als je database. Beter nog is dat je met een object werkt (wanneer je id's niet opvolgend zijn heb je al snel problemen met arrays en wordt het erg complex).

Simpel js object:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. var CatObj = [
  2. { 'catID'  : 1,
  3.    'catNaam' : 'HoofdCat1' ,
  4.    'subCats'  : [{ 'id' : 2, 'naam' : 'subcat1a'}, { 'id' : 3, 'naam' : 'subcat1b' }]
  5. }, 
  6.  
  7. { 'catID'  : 4,
  8.    'catNaam' : 'HoofdCat2' ,
  9.    'subCats'  : [{ 'id' : 5, 'naam' : 'subcat2a'}, { 'id' : 6, 'naam' : 'subcat2b' }]
  10. }
  11.  ];

Simpelweg aan te spreken als CatObj[0].subCats[0].naam.
Dit object dien je dus als text op te bouwen met php.

Nu je alle categorieën tot je beschikking hebt in js is het een kwestie van je juiste eventhandling.

je maakt dus 2 dropdownboxxen (of meerdere, dit hangt natuurlijk af hoeveel dimensies diep je subcategorieën zijn.) en bij nr hang je een onchange eventhandler die jou 2de vult met de juiste data:

html (het eerste dropdown object is al gevuld (ook dmv php) dit kan je ook goed doen in je js maar het gata om de illustratie ;) )
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <form>
  2. <select name='HoofdCat'><option value='1'>HoofdCat1</option><option value='4'>HoofdCat2</option></select>
  3.  
  4. <select name='SubCat'></select>
  5. </form>


js:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function () {
  2. document.forms[0].elements['HoofdCat'].onChange = setSubCat; // attach EventHandler
  3.  }
  4.  
  5. function setSubCat() {
  6.   var hoofdCat = document.forms[0].elements['HoofdCat'];
  7.   var val = hoofdCat.options[hoofdCat.selectedIndex];
  8.  
  9.   var subCat = document.forms[0].elements['SubCat']
  10.  
  11.   for (var i=0;i<CatObj.length;i++) {
  12.     if(CatObj[i].id==val) {
  13.          for(var j;j<CatObj[i].subCats.length;j++) {
  14.               subCat.options[j] = new Option(CatObj[i].subCats[j].id, CatObj[i].subCats[j].naam);
  15.          }
  16.      }
  17.   }
  18. }


That's about it.. Let wel dat dit n draft is dus ik heb niets getest. Maar het idee is duidelijk lijkt me.

Succes ermee  
Offline kenzo - 21/08/2007 13:49 (laatste wijziging 21/08/2007 13:58)
Avatar van kenzo PHP beginner bedankt,

zal eens proberen



edit://

Misschien een domme vraag, maar waar moet ik dit zetten (sorry, maar weet niet veel van javascript)


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var CatObj = [
  2. { 'catID'  : 1,
  3.    'catNaam' : 'HoofdCat1' ,
  4.    'subCats'  : [{ 'id' : 2, 'naam' : 'subcat1a'}, { 'id' : 3, 'naam' : 'subcat1b' }]
  5. }, 
  6.  
  7. { 'catID'  : 4,
  8.    'catNaam' : 'HoofdCat2' ,
  9.    'subCats'  : [{ 'id' : 5, 'naam' : 'subcat2a'}, { 'id' : 6, 'naam' : 'subcat2b' }]
  10. }
  11.  ];
Offline BramBo - 21/08/2007 14:00
Avatar van BramBo JS gevorderde in je head dus voor window.onload = function ()

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script type='text/javascript'>
  4. <!--
  5. var CatObj = [ {} ];
  6.  
  7. window.onload = ....
  8. --//>
  9. </script>
  10. </head>
  11. <body...
Offline kenzo - 21/08/2007 14:10
Avatar van kenzo PHP beginner Heb nu dit, maar geeft fouten aan!

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script type='text/javascript'>
  4.  
  5. var CatObj = [
  6. { 'catID'  : 1,
  7.    'catNaam' : 'HoofdCat1' ,
  8.    'subCats'  : [{ 'id' : 2, 'naam' : 'subcat1a'}, { 'id' : 3, 'naam' : 'subcat1b' }]
  9. }, 
  10.  
  11. { 'catID'  : 4,
  12.    'catNaam' : 'HoofdCat2' ,
  13.    'subCats'  : [{ 'id' : 5, 'naam' : 'subcat2a'}, { 'id' : 6, 'naam' : 'subcat2b' }]
  14. }
  15.  ];
  16.  
  17.  
  18. window.onload = function () {
  19. document.forms[0].elements['HoofdCat'].onChange = setSubCat; // attach EventHandler
  20.  }
  21.  
  22. function setSubCat() {
  23.   var hoofdCat = document.forms[0].elements['HoofdCat'];
  24.   var val = hoofdCat.options[hoofdCat.selectedIndex];
  25.  
  26.   var subCat = document.forms[0].elements['SubCat']
  27.  
  28.   for (var i=0;i<CatObj.length;i++) {
  29.     if(CatObj[i].id==val) {
  30.          for(var j;j<CatObj[i].subCats.length;j++) {
  31.               subCat.options[j] = new Option(CatObj[i].subCats[j].id, CatObj[i].subCats[j].naam);
  32.          }
  33.      }
  34.   }
  35. }
  36.  
  37. </script>
  38. </head>
  39. <body>
  40.  
  41. <form>
  42. <select name='HoofdCat'><option value='1'>HoofdCat1</option><option value='4'>HoofdCat2</option></select>
  43.  
  44. <select name='SubCat'></select>
  45. </form>
  46. </body></html>
Offline BramBo - 21/08/2007 14:31
Avatar van BramBo JS gevorderde
Citaat:
maar geeft fouten aan!

tja.. zoals ik al zei is het 'n draft. Als ik zo naar de code kijk zie ik al 2 fouten die je dient te verbeteren.. Wellicht mijn fout, maar de code zelf doornemen is geen verkeerd idee 

in ieder geval:
- definiëren van var j dient gedaan te worden als var j=0;
- catObj[i].id bestaat niet .catID wel.
- onChange = onchange

Misschien is het ook een idee om een leeg object in je HoofdCat select te zetten dus met value=0 en value 'kies n cat' hiervoor maak je nastuurlijk een check in je onchange eventhandler zodat hij niet het object wil aanspreken wanneer deze gekozen wordt.
Offline Thomas - 21/08/2007 14:40
Avatar van Thomas Moderator Kun je niet veel beter werken met het tonen en verbergen van divs? Heb je veel minder javascript nodig.
Offline kenzo - 21/08/2007 14:41
Avatar van kenzo PHP beginner kan, maar hoe?

ik weet niet hoe 
Offline BramBo - 21/08/2007 15:20
Avatar van BramBo JS gevorderde Dat kan. Maar het enige verschil is hier dat je geen object vult met database data maar je html als een object opbouwt. (dus je maakt alles selectboxxen al gevuld en zet deze in een div met een id die gelijkt (of bijna gelijk) aan de id van je hoofdcat)
opdeze manier bekijk je welke div je showed en de rest hide je.

dus dmv element.style.display = 'none'; (hiden) element.style.display = 'block'; (showen).
Het probleem is dat je alle divs moet hiden dus deze dien je in js voor te definieren of je loopt alle div elementen door in je (getElementsByTagName('div')) DOM en matched ze via regex of ze voldoen aan je criteria. (dus dmv een prefix)
Offline Thomas - 21/08/2007 16:00
Avatar van Thomas Moderator Euh, je drukt gewoon alle selectboxen af, en je toont alleen de geselecteerde items :]. Nix geen DOM / JS verder :].
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.241s