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

On Thu, Jul 31, 2008 at 2:31 PM, Boyd, Todd M. <tmboyd1@xxxxxxxx> wrote:
-----Original Message-----
From: Rahul S. Johari [mailto:sleepwalker@xxxxxxxxxxxxxxxx]
Sent: Thursday, July 31, 2008 12:27 PM
To: Boyd, Todd M.
Cc: php-general@xxxxxxxxxxxxx
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@xxxxxxxxxxxxxxxx]
Sent: Thursday, July 31, 2008 11:40 AM
To: php-general@xxxxxxxxxxxxx
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
.

Relevant Pages

  • Re: multiple pick from drop-down list
    ... Each sheet will have anywhere from a couple pay items up to ... selection model is the accidental over-writing of existing data. ... We have setup drop-down lists through data ...
    (microsoft.public.excel)
  • Re: Asp.net Dropdownlist selected index in changed
    ... back it will lose selection from fifth to first item in the list. ... The selected index of first two lists remain same but only thirds are ... private void BindSectionDropDownlist() ... Code for Searching according to the selection of third dropdown ...
    (microsoft.public.dotnet.framework.aspnet)
  • Re: multiple pick from drop-down list
    ... Let all your friends at NJDOT know that you are still working ... selection model is the accidental over-writing of existing data. ... We have setup drop-down lists through ...
    (microsoft.public.excel)
  • RE: [PHP] Dynamic Select Lists - 1st Selection Effects 2nd!
    ... [PHP] Dynamic Select Lists - 1st Selection Effects 2nd! ... The page referenced by an AJAX XmlHttpRequest() doesn't have to be ...
    (php.general)
  • Re: multiple pick from drop-down list
    ... selection model is the accidental over-writing of existing data. ... We have setup drop-down lists through data ... Now a user wants to be able to select multiple items and ...
    (microsoft.public.excel)