RE: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd!

> -----Original Message----- > From: Rahul S. Johari [mailto:sleepwalker@rahulsjohari.com] > Sent: Thursday, July 31, 2008 12:27 PM > To: Boyd, Todd M. > Cc: php-general@lists.php.net > Subject: Re: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! > > > On Jul 31, 2008, at 12:55 PM, Boyd, Todd M. wrote: > > >> -----Original Message----- > >> From: Rahul S. Johari [mailto:sleepwalker@rahulsjohari.com] > >> Sent: Thursday, July 31, 2008 11:40 AM > >> To: php-general@lists.php.net > >> Subject: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! > >> > >> Ave, > >> > >> What I have is two Select (Drop-Down) lists (State & County) and I'm > >> populating them from a mySQL table. What I want is when the user > >> selects the State from the State List, the County List should only > >> pull out counties associated with that State. > >> > >> Now I know that you can create such an effect using Javascript or > >> AJAX > >> and have nothing to do with PHP/mySQL - and I was able to accomplish > >> that - but only for lists where you could define data manually. I'm > >> not able to accomplish this at all with Lists that are pulling out > >> option data from a mySQL table. > >> > >> I'm also giving the User the opportunity to add as many State/County > >> combinations as possible in a box. ---8<--- snip > >> I'm not able to understand exactly how to manipulate the SQL Query > or > >> otherwise force the 2nd Select List to only show records that match > >> the selected State. > >> > >> Any pointers? > > > > The page referenced by an AJAX XmlHttpRequest() doesn't have to be > > static. You can even use the query string to supply the AJAX call > with > > parameters (or perhaps post a form instead). This way, you can pass > > the > > chosen state to the AJAX-requested page and use PHP on the other end > > to > > construct the appropriate counties selection list. AJAX could then > > push > > this result into a DIV that had, up until now, contained an empty > > selection list with no available options. > > > > Summary: Page has two DIVs: one for state list, one for county list > > (which is empty). User clicks first DIV's selection box, onChange JS > > method fires AJAX call to getCounties.php?state=XX (where XX is the > > chosen state). PHP on the other end builds a selection list for the > > given state and returns it to the AJAX call. The AJAX result is then > > assigned to the second div, which now contains the list of counties > > for > > the given state. > > > In theory your solution sounds extremely feasible & perhaps the > appropriate procedure. My problem is that I'm not an expert at all in > AJAX (Or javascript for that matter). The manually-fed examples I > worked with were freely available sources for such a functional Select > List, and I tried manipulating them to fit in my php/mySQL code but to > no avail. > > I'll try & work this out, but I doubt I'll be able to. > > Thanks. Rahul, Aww, come now... don't be so negative! :) Most widely-adopted programming practices are widely-adopted for a reason: they are not inherently difficult to use. This does, of course, get obfuscated by various extensions and poor programming techniques end-users employ, but I digress. http://www.w3schools.com/ajax/ should get you started, but here's a simple implementation: selection.html: --- <div id="stateDiv"> <select id="stateList" name="state" onchange="ajaxCounties();"> <option value="Alabama">Alabama</option> <option value="Alaska">Alaska</option> <!-- You get the idea... --> </select> </div> <!-- /stateDiv --> <div id="countyDiv"> <select name="county"> <option value=""></option> </select> </div> <!-- /countyDiv --> <script type="text/javascript"> function ajaxCounties() { var xmlHttp; var stateList = document.getElementById("stateList"); try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { // Older IE try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { // AJAX unsupported alert("Your browser does not support AJAX!"); return false; } } } // ajax actions xmlHttp.onReadyStateChange = function() { // data returned from server if(xmlHttp.readyState == 4) { // fill div with server-generated <select> element document.getElementById("countyDiv").innerHTML = xmlHttp.responseText; } } // request counties from web server xmlHttp.open("GET", "county.php?state=" + stateList.options[stateList.selectedIndex].value, true); xmlHttp.send(null); } </script> --- I'll leave the PHP implementation up to you... but it'll look something like this: county.php --- <select id="countyList" name="county"> <?php // perform query here. for(a = 0; a < mysql_num_rows($result); a++) { $row = mysql_fetch_array($result); echo "<option value=\"{$row['countyId']}\">{$row['countyName']}" . "</option>"; } ?> </select> --- HTH, Todd Boyd Web Programmer