Dynamically changing dropdown options!?!?

[suess0r]

hi there,

I am capable of dynamically filling my dropdown box with data from my database...

ex: Cities from my city_states table...

I want to be able to fill 1 dropdown with States and when they choose the state the next drop down fills in with cities within that state. I know i can do this in javascript but I need to keep it simple in php and was wondering if there was any way of doing this in php?? I know dreamweaver has those recordsets and form variables that i was trying to mess with because it seemed to be somewhat what i was trying to do, but without any luck. Can anyone shed any light on this problem?!?

[bljepp69]

You basically have to use an "onChange" command in your select element to submit the form for processing.  Then you go through the process of figuring out which state they selected and filling the next drop down. 

If you don't want to reload the page, you will have to either fill all possible data into variables that are available to javascript and then display them as necessary or use an AJAX method.

[Psycho]

Yes it is possible, but you will need to do one of two things:

1) Do a page refresh whenever the user selects a State. This is a little "kludgy" in my opinion, but is fairly strait-forward. Either do an automatic form submission of the state using javascript or if you don't want to use javascript at all you would need to require the user to select a state first and submit the page to go to the next page that will display the city field.

2) Use AJAX. This will work much like a javascript only solution as in it would be fairly transparent, but there would be a little lag. Of course this would be a little more difficult to implement and still uses javascript.

[suess0r]

the reason for me wanting to keep it simple is because it's for a mobile site and heavy javascript and ajax aren't supported by most mobile browsers... can anyone think of any other way of getting the State > City selected easily without having to do a browser refresh or anything with javascript or ajax..

maybe if i made the dropdown look like this...
Florida
    Orlando
    Tampa
    Miami
    Gainsville
Georgia
      Atlanta
      etc...

keeping them tabbed out and giving the states a value of "", is there any way of doing something like that where the cities are tabbed out???

[conker87]

Remember the group tag for the select tag!

[code]<optgroup label="Florida"> <!-- Unselectable bold-italic label in your drop-down list -->
    <option value="FL, Orlando">Orlando</option>
</optgroup>[/code]
It's a very good way to keep drop-down lists sorted, I've used it here http://www.leagueofvillains.co.uk/mypie/?action=register, and check the "Country" field for the labels.

[ToonMariner]

thats a pity as using ajax would vastly improve your sites performance on a mobile deveice with limited connectivity speed. sending a whole new header for the entire page would slow teh site down a lot. conversly populating ALL the data on the one page load will cause another significant lag in loading time.

I haven't really paid attention to development fpr mobile browsers bar using the stylesheet and media attribute.

I would be interested if you had any information on what mobile browsers are capable of (in terms of js) or a link to resources where I could read up on such matters.

If most of the mobile browsers do have some rudamanetary ajax support then I would go for the ajax other wise I would opt for the entire page to be loaded once more with the new info.

[ToonMariner]

Forgot about that - go with the option groups!!! ;)

[conker87]

Option groups are sexy.

Oh and apologies if I got the 2 letter's wrong concerning Florida, I don't live in the US and I have no idea what states have what 2 letter nicknames.

[suess0r]

Thanks for all the replies, conker i'm gunna go ahead use the option groups i think that looks sexy too ;P as far as what js is supported by the majority of mobile browsers are basic javascript:history.back() n shit, it runs php suprisingly well and i've had no problem with running queries and i'm writing it all in basic css so i'm having pretty fast load times as well... would anyone have any thoughts about saving some time by having the header always loaded and just refreshing the middle frame instead of a whole page? i've had some issues and i know that the mobile browsers don't support iframes but i think frames are... any thoughts?