Re: Dynamic Select Lists - 1st Selection Effects 2nd!

On Thu, Jul 31, 2008 at 2:31 PM, Boyd, Todd M. <tmboyd1@ccis.edu> wrote: >> -----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 > You MAY want to use an existing library like YUI for this. I've found that a lot of the simple AJAX examples I've found on the net have memory leaks, especially in IE. The YUI kit seems to avoid these; I can't speak for other libraries that are available. Plus, you get an API to (hopefully) simplify things. http://developer.yahoo.com/yui/ Andrew