Logica probleem met JS

[Klucas]

Hallo,

Ik ben bezig om met javascript (en library Jquery) een site te maken waarvoor ik het volgende nodig heb. Dynamische selectboxen die wanneer ze verandert worden een nieuwe selectbox maken waarin dan weer gegevens geselecteerd kunnen worden, een voorbeeld:

Gebruiker drukt op een knop:
[Selectbox A] verschijnt
Gebruiker selecteert een optie:
[Selectbox B] verschijnt met de opties dynamisch aangepast op de value van A.

Het probleem is dat door het dynamisch aanmaken van de selectboxen ik het id en de name van de selectbox zet op "waarde"+teller (in het bovenstaande voorbeeld dus A0 en B0), waar teller een teller is die bijhoud hoeveel selectboxen er gemaakt zijn.

Omdat het id steeds wordt aangepast heb ik dan het probleem dat wanneer ik selectbox A0 van waarde verander, dat selectbox B1 verandert (wanneer de teller op 1 staat). Ik moet dus zorgen dat ik met de change van de selectbox ook op een of andere manier het element als object kan meegeven zodat ik hiervan het name attribute kan ophalen en daar het goede tellernummer mee kan afleiden.

De code die ik heb is als volgt:

function addProduct(){
	var url = "includes/php/catalog/loadcategories.php";
	$.post(url, 
		function(data){
			$('<tr id="catalogid'+invoiceProducts+'"><td>Product-categorie</td><td><select name="category'+invoiceProducts+'" id ="category'+invoiceProducts+'">'+data+'</select></td></tr>').appendTo('#invoiceTable');
			$("#category"+invoiceProducts).change(
				function(){
					var currentCatalogField = $("#category"+invoiceProducts).attr("name");
					if($('#product'+invoiceProducts).length > 0){
						var category = $('#category'+invoiceProducts).val();
						var selectbox = true;
						productSelect(category, selectbox);
					}
					else{
						var category = $('#category'+invoiceProducts).val();
						var selectbox = false;
						productSelect(category, selectbox);
					}
			});
			//$('<tr><td>Product-id: </td><td><input type="text" id="catalog'+invoiceProducts+'" name="catalog'+invoiceProducts+'" /></td>').appendTo('#invoiceTable');
	}, "html");
	invoiceProducts++;
}

De functie productSelect creëert de tweede selectbox met daarin de opties afhankelijk van de value (var category = $('#category'+invoiceProducts).val() van het huidige veld. De optie true of false die meegegeven wordt zorgt ervoor dat er niet steeds een veld bij komt maar het veld vervangen wordt.

Weet iemand een manier om mijn probleem op te lossen? Alvast bedankt :thumb:

 

[MAX232]

Begrijp ik het goed dat je productSelect een extra parameter mee wilt geven om de nieuwe select de juiste naam en id te geven?

Als dat zo is moet het zoiets zijn:

var category = $('#category'+invoiceProducts).val();
var selectbox = true;
productSelect(category, selectbox, $('#category'+invoiceProducts).id);

Nu is de 3de parameter de id van de eerste select.

 

[Klucas]

Bedankt voor je antwoord Max, maar dit lost het probleem niet op. Er wordt zo namelijk nog steeds alleen het ID van de teller opgehaald en niet van het object waarvan de waarde veranderd wordt.

Ik heb zelf een werkende oplossing kunnen vinden, waarmee ik elk selectbox ID in een array plaats en constant de hele array uitlees en verander. Misschien dat iemand anders hier nog een keer wat aan heeft.