1. #1

    Registered
    11/07/07
    Location
    Genk
    Posts
    112
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)

    Combobox aan de hand van andere combobox

    Ik heb 2 comboboxen, in de eerste kies je een categorie en in de 2de zou aan de hand van de gekozen categorie de subcategorieen van deze categorie getoond moeten worden. Dit zou met jquery mogelijk zijn, maar ik vind er nergens iets van? Iemand die weet hoe dit moet?
    no votes  

  2. #2
    Albireo's Avatar
    Registered
    21/10/05
    Location
    Herentals
    Posts
    1,515
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    2/13
    1. Javascript is een vreemde taal
    2. .click() en/of .change() om te detecteren wanneer iemand een categorie kiest
    3. .val() om te weten welke categorie gekozen is
    4. .empty() om je tweede combobox leeg te maken voor je hem opnieuw gaat vullen met nieuwe waardes
    5. .append() om nieuwe waardes toe te voegen aan je tweede combobox

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>My first HTML document</title>
    		<script type="text/javascript" src="js/jquery.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function() {
    				var schermen=new Array();
    				schermen[0]='Samsung';
    				schermen[1]='Ilyama';
    				schermen[2]='Acer';
    				var hdds=new Array();
    				hdds[0]='Samsung';
    				hdds[1]='Western Digital';
    				var printers=new Array();
    				printers[0]='Epson';
    				printers[1]='HP';
    				printers[2]='Canon';
    				printers[3]='Brother';
    				var groepen=new Array();
    				groepen[1]=schermen;
    				groepen[2]=hdds;
    				groepen[3]=printers;
    				$('#groep').click(function() {
    					groep=$('#groep').val();
    					if (groep!=null) {
    						$('#merk').empty();
    						for(var i=0;i<groepen[groep].length;i++) {
    							$('#merk').append('<option value="' + i + '">' + groepen[groep][i] + '</option>');
    						}
    					}
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div>
    			<select id="groep">
    				<option value="1">schermen</option>
    				<option value="2">harde schijven</option>
    				<option value="3">printers</option>
    			</select>
    			<select id="merk">
    				<option value="-1">---selecteer een categorie---</option>
    			</select>
    		</div>
    	</body>
    </html>
    "And we wept, Precious. We wept to be so alone." --- Gollum
    "Sometimes there are no words. No clever quotes to neatly sum up what happened that day. Sometimes, the day just . . . ends." --- Hotch (Criminal Minds)
    no votes  

  3. #3

    Registered
    11/07/07
    Location
    Genk
    Posts
    112
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Thx!
    no votes  

  4. #4

    Registered
    11/07/07
    Location
    Genk
    Posts
    112
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Ik had dit voorbeeldje gebruikt om zelf iets uit te proberen en dat werkte toen, maar nu plots niet meer. Dit is wat ik doe, is er iemand die kan uitleggen waar mijn code dan misgaat want volgens mij is dit toch exact hetzelfde als in het voorbeeld?

    Code:
    <script type="text/javascript" src="/cms/scripts/jquery.js"></script>
    <script type="text/javascript">
          $(document).ready(function() {
                  var testt=new Array();
                  var test=new Array();
                  var natest=new Array();
                  var eerste=new Array();
                  var testvooriedereenbovenaan=new Array();
                  var Discussies=new Array();
                  var Transfers=new Array();
                  Transfers[0]='Binnenlandse Transfers';
                  Transfers[1]='Buitenlandse Transfers';
                  var lalalala=new Array();
                  var xxxxxxxxx=new Array();
                  var categorieen=new Array();
                  categorieen[1]=testt;
                  categorieen[2]=test;
                  categorieen[3]=natest;
                  categorieen[4]=eerste;
                  categorieen[5]=testvooriedereenbovenaan;
                  categorieen[6]=Discussies;
                  categorieen[7]=Transfers;
                  categorieen[8]=lalalala;
                  categorieen[9]=xxxxxxxxx;
                  $('#categorie').click(function() {
                          categorie=$('#categorie').val();
                          if (categorie!=null) {
                                  $('#subcategorie').empty();
                                  for(var i=0;i<categorieen[categorie].length;i++) {
                                          $('#subcategorie').append('<option value="' + i + '">' + categorieen[categorie][i] + '</option>');
                                  }
                          }
                  });
          });
    </script>
    no votes  

  5. #5
    Albireo's Avatar
    Registered
    21/10/05
    Location
    Herentals
    Posts
    1,515
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    2/13
    Wat ik eerder had geschreven werkte blijkbaar enkel in Firefox (Safari laat soms nog lege comboboxen zien terwijl er eigenlijk inhoud zou moeten zijn; ik denk dat Safari problemen heeft met selects zonder een enkele option). Hier is de nieuwe en verbeterde code:

    Code:
    $("#categorie").change(function() {
    	var categorie=$("#categorie option:selected:first").val();
            if (categorie!=null) {
    		$('#subcategorie').empty();
    		for(var i=0;i<categorieen[categorie].length;i++) {
    			$('#subcategorie').append('<option value="' + i + '">' + categorieen[categorie][i] + '</option>');
    		}
    	}
    }).trigger("change");
    Die .trigger("change") die er aan hangt, zorgt ervoor dat deze functie onmiddellijk na het laden van de pagina wordt uitgevoerd. Als er in je HTML "<option value="7" selected="selected">Transfers</option>" zou staan, zou in je tweede combobox meteen alles van transfers getoond worden. Als er niets "selected" is in HTML wordt de eerste option geselecteerd.


    Een potentieel probleem met voorgaande code is dat je values een opeenvolgende reeks van getallen beginnende bij 0 moeten zijn. Je kan ook strings als value gebruiken, dat wordt dan zo:
    Code:
    			var schermen=new Object();
    			schermen['SAMS']='Samsung';
    			schermen['ILYA']='Ilyama';
    			schermen['ACER']='Acer';
    			
    			var hdds=new Object();
    			hdds['SAMS']='Samsung';
    			hdds['WEST']='Western Digital';
    
    			var printers=new Object();
    			printers['EPSO']='Epson';
    			printers['HP']='HP';
    			printers['CANO']='Canon';
    			printers['BROT']='Brother';
    			
    			var groepen=new Object();
    			groepen['1']=schermen;
    			groepen['2']=hdds;
    			groepen['3']=printers;
    			$(document).ready(function() {
    				$('#groep').change(function() {
    					var groep=$("#groep option:selected:first").val();
    					if (groep!=null) {
    						$('#merk').empty();
    						for(var merk in groepen[groep]) {
    							$('#merk').append('<option value="' + merk + '">' + groepen[groep][merk] + '</option>');
    						}
    					}
    				}).trigger("change");
    			});
    Last edited by Albireo; 10-04-2010 at 11:54.
    "And we wept, Precious. We wept to be so alone." --- Gollum
    "Sometimes there are no words. No clever quotes to neatly sum up what happened that day. Sometimes, the day just . . . ends." --- Hotch (Criminal Minds)
    no votes  

  6. #6

    Registered
    11/07/07
    Location
    Genk
    Posts
    112
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Thx, werkt intussen.
    no votes  

  7. #7

    Registered
    11/07/07
    Location
    Genk
    Posts
    112
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Ik zie net dat die 2de oplossing toch niet helemaal juist werkt, er zit verschillende keren "undefined" tussen mijn resultaten in de subcategorieenbox.

    Na edit: Blijkbaar ligt het aan mijn eigen code dus nevermind
    Last edited by Freakie42; 14-04-2010 at 12:44.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in