Unlimited chained select boxes

software development

#1

i need some unlimited chained select boxes
useing Jquery, Ajax, PHP, MySQL

how can i get this done?

i have been looking for 2 days, and nothing.

the MySQL is already done,

if am just lost on this.


#2

how about this: http://jquery.malsup.com/form/
i’ve been looking into it. looks promising.


#3

what i need is, when select an option on select box A,
it will open select box B, with sub-opptions of select box A,
then when you select an option on select box B, it opens select box C
select and option on C to open D,
D>E
E>F
F>G

so on, with no limmit,
useing Jquery, Ajax, PHP, MySQL

i am thinking my problem is with the Jquery,
becuase i got the MySQL and PHP done,


#4

that’s no problem to do with jquery. what problem are you running into?
make sure you use event delegation and always add your new boxes inside the element which is watching


#5

ok
you select an option on select box A, the value is set by PHP (contains the database ROW_ID)
once change, it sends that ROW id to the server (by AJAX), it will then search the database and build another select box,
where all PAR_ID match ROW_ID, (this works GOOD)

however, once the 2nd select box outputs, the .change() dose not work for it
but it dose work for the select box A.


#6

either use an event listener on a parent element or bind your ajax caller to the new div in a callback after the new element is loaded


#7

i have tested each of the codes below

GetNewSelect(JSJQ_category) will be done with onchange="GetNewSelect(this.value)"
GetNewSelect(JSJQ_category) this works, but, if say affter, box B is loaded,
and you make a chnage to box A, box B stays, then box B is dubble loaded.
same thing happens if i use .calss or #id for the elemnts (DIV, SELECT)


#8

as i mentioned before, please learn about event delegation

if you don’t want to do that, then borrow some working code from the thousands of working examples available

i don’t mean to sound rude, but i had these same problems 6-12 months ago. they are common newbie mistakes. i learnt how to do it and i’m telling you where to look. i’m not going to write your code for you though. you could pay someone to do that.

good luck


#9

i did this,
function GetNewSelect(JSJQ_category, SelectCount) {

if(SelectCount < $(".JQ_category").length) {
	var SelectLength = $(".JQ_category").length;
	while(SelectLength > SelectCount) {
		$('select[sn="'+SelectLength+'"]').remove();
		SelectLength--;
		if(SelectLength < 2) { exit; }
	}
}

$.ajax({
   type: "POST",
   url: "/ajax/",
   data: "category="+JSJQ_category+"&SelectCount="+SelectCount,
   success: function(msg1){
			
			$("#NEXTSELECT1").append(msg1);
						}
});

}

then each select

and it works good, now just to make more resonable VAR names,

i added a sn="" to the select idk if this is BEST but it works, haha