Sophism Posted January 25, 2010 Share Posted January 25, 2010 So I am working on a website right now. Basically what I want to do is have a series of drop down boxes. The first box has the options a, b ,c. If a is selected then the second box is populated with 1,2,3 if b is selected then the second box is populated with 11,22,33 if c is selected then the second is populated with 111,222,333. The values of all the boxes are stored in a mySQL DB. The site is primarily PHP with a little bit of Javascript. My real issue is just figuring out the best way to get the contents of the second box to populate based on what is chosen in the first drop down. Any suggestions? Link to comment Share on other sites More sharing options...
0 +theblazingangel MVC Posted January 25, 2010 MVC Share Posted January 25, 2010 AJAX! Upon selection in the first box, use ajax to fetch valid options for the second. Implementing this you could either: a) upon every selection change in box 1: fetch data for box 2, delete all existing options for box 2, and create new option entries. b) upon page creation, include entire list of options in second box. on page load loop through and hide them all with javascript. upon selection change in box 1, use ajax to fetch a list of ID's of valid entries, then loop through all entries hiding/showing each as appropriate. Option B in my opinion is preferable because it is easier and probably generally more efficient - there's less data to send via ajax (option ID's only). This option would probably work best if every option has a unique ID number, upon printing the list you can give the <option> tag an 'id' attribute based on the ID. Option B has a non-javascript fallback, though this can be given to option A too - simply printing a complete list of options on page generation. There should be no need to worry about invalid selections, your server-side script should always be validating everything anyway - never just assume, someone could have tampered with the form! One potential problem to watch out for with option B though is the possibility of the list of valid options being edited (in the database / updated file) at the same time as users utilising your form! If they select an option that's no longer valid, that's fine, validation checking should flag up the problem. If new options are created (or labels for existing options changed), then firstly your javascript code should be capable of ignoring the ID's for these new entries, and secondly, the user won't have access to these new/updated options until the next time the form is reloaded (though a routine could be added so that if a new option is referenced (<option> with specified ID does not exist), it can fetch the necessary data via ajax to create it insert it into the list. updating labels would perhaps not be feasible). Link to comment Share on other sites More sharing options...
0 Sophism Posted January 25, 2010 Author Share Posted January 25, 2010 Nope, the options themselves would not change. Thanks for the tip, I havent done much with ajax but ill look into it! Link to comment Share on other sites More sharing options...
0 Rohdekill Posted January 25, 2010 Share Posted January 25, 2010 I'd go Ajax as well, unless you don't mind a (visible) post back on each selection Link to comment Share on other sites More sharing options...
0 Sophism Posted January 25, 2010 Author Share Posted January 25, 2010 Hmm How would the visible post back work? Some time of javascript on the drop downs to post on click? The thing is I am trying to make this compatible for a webbrowser thats in a game as well. Which has limited support. Link to comment Share on other sites More sharing options...
0 Sophism Posted January 25, 2010 Author Share Posted January 25, 2010 http://www.w3schools.com/php/php_ajax_database.asp Basically using that to do it ;) Pretty simple yet badass! Thanks for pointing me towards ajax. Link to comment Share on other sites More sharing options...
Question
Sophism
So I am working on a website right now.
Basically what I want to do is have a series of drop down boxes.
The first box has the options a, b ,c.
If a is selected then the second box is populated with 1,2,3
if b is selected then the second box is populated with 11,22,33
if c is selected then the second is populated with 111,222,333.
The values of all the boxes are stored in a mySQL DB.
The site is primarily PHP with a little bit of Javascript.
My real issue is just figuring out the best way to get the contents of the second box to populate based on what is chosen in the first drop down.
Any suggestions?
Link to comment
Share on other sites
5 answers to this question
Recommended Posts