Archief - Combobox aan de hand van andere combobox

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Freakie42

Legacy Member
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?
A

Albireo

Legacy Member
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>
F

Freakie42

Legacy Member
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? :wtf:

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>
A

Albireo

Legacy Member
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");
			});
F

Freakie42

Legacy Member
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 ;)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan