Seeking a web tutorial on 'chained' selectors

[scubak1w1]

Hello,

I have a form where users select various parameters from drop down boxes to query and then get to to see the results for the their selection.

The pulldowns are populated via some constructed SQL pulling data out of a PostgreSQL database.

I would like to make the pulldowns 'interconnected' as it were - but wanted some online reading matter to help me poke at this and was hoping someone had a online tutorial they could point me at...

For instance, if they select a particular mine site (or whatever), only boreholes in the database drilled at that mine site will be then be available in the pulldowns for the boreholes.

I can get my head OK around the logic, but am having trouble with the technical steps needed - hence the needed for a "cheat" as it were - and Google has not been my friend here, if you will excuse the cliché...

I assume it would be a matter of using an 'onchange' for the <select> to trigger an adjustment of the relevant WHERE clauses of the SQL statements for other relevant pulldowns and then refresh (?) the page??

Any help in pointing me to a URL would be much appreciated!

Regards,
GREG...

[nathj]

Hi Greg,

It's nice to see someone here not after a full code sample but wanting to learn for themselves.

You are part way there with the use of onchange for your dropdown. This onchange then needs to call some JS function that uses the XMLHTTPRequest object to define the next drop down box.

I would consider forcing the user through a series of steps. So you have 4 lists for example and each list is dependant on the choices made in the previous list.

When the page first loads only one list is available, however, underneath this are 3 empty <div>'s with unique ID's. When the user makes a selection the onchange event calls the JS that then uses a php file on the server to define the next list. This definition is then written to the innerhtml of the next empty div; enabling the user to select from the next list and so on and so forth.

This is the basic logic you need, you may need to play around with it a it but essentially I think it's what you are after.

The technology you need to achieve this is know as AJAX - Asynchronous Javascript And Xml (not a cleaning fluid or a Dutch football team).

When I first tried to get my head around this I found this tutorial really helpful.

Have a go with this and if you get stuck wioth any of post back here with your code and I'll do my best to help - I'm sure you'll have this up and running in no time at all.

Cheers
nathj

[ronverdonk]

I don't really have a tutorial, but googling gets you far. The following link shows a simple 'chained select' demo plus explanation. Maybe it is of any help AJAX chained select demo

Ronald

[scubak1w1]

Thanks you kind sirs (?)... just need to get it the current page working in IE 6&7 - and then off to try and get my head around this...

Much appreciated!

'cause if you 'ain't learning something new, you may as well be dead... ;-)

[ronverdonk]

Thanks you kind sirs (?)... just need to get it the current page working in IE 6&7 - and then off to try and get my head around this...

Much appreciated!

'cause if you 'ain't learning something new, you may as well be dead... ;-)

You are welcome! See you around a next time.

Ronald

[scubak1w1]

You said to post back if I got stuck...

I think I have everything in place... BUT no changes occur when I try and update the div's innerHTML with the reponsetext....

see the last post in the thread "Seeking help on why changing innerHTML..." in the Javascript / DHTML / Ajax Forum... my (buggy! :-) ) code copied there....

Cheers!

[ronverdonk]

Will have a look in the JS forum.

Ronald