Tom's Guide | Tom's Hardware | Tom's Games
![]() |
![]() |
![]() |
I'm just wondering if anyone can recommend what the best (or only) way of having dropdown lists that affect the rest of the page almost instantly. That's probably not a very good description actually...
As an example, usually used on order forms etc., when you're asked to select a country in one drop-down list, the page will refresh quickly but keep all the correct info and then the drop-down list below will have different contents depending on the previous one.
So, if the first drop-down list was a country select which selected the UK the next one might be updated to display all the counties, or cities, in the UK.I've been learning php and MySQL recently and I can't think of any way of doing this using just them. Is it possible? Or is it likely to be a JavaScript function?
Any help would be great!
Thanks!

To make it instant yes you need javascript.
But loading all counties & cities into the user's browser on pageload, will probably scare them away. Not to mention if the user don't have javascript.
The best way is to use ajax, the safe one, the one that still "work" without javascript.
I'm also new in using it, but here's one tutorial that I liked the most: The tutorial. And here's the sample page, view the source of it.
And here's another very simple readings about ajax concept :-)
---
Fubar

btw talking about ajax dropdown lists, this is one you must see: http://labs.google.com/suggest :-D
---
Fubar

A couple comments:
In the original post the question ws about how to get this functionality after a form change and reloading the page. To answer the question directly, it would be done in ther server side code - i.e. the PHP.
However, Laler's solutions are a better approach - especially when the list of data can be very long. If you are dealing with a limited number of items that can appear in the list then client side JavaScript is a good choice as well.
Michael J

Thanks for the answers so far. But as far as adding a form with a list of countries and cities goes, that was just an example...
I'm actually trying to build an admin page for a guitar tab website my friend is making. I was planning on using this so I can have a drop-down list of the artist he's submitting the tab for, then the drop-down list below would update and list all the album's that artist has released and then the drop-down list below that would update with all the songs in that album. All of the data in these will be drawn from the database.
I've actually found a JavaScript script which someone on another website recommended that looks like it might do the job. I know practically nothing about JavaScript though so I'm gonna have to look through it. I'm using I can integrate PHP and MySQL within JavaScript code?

Sorry if I don't really understand the question :-D I think it was, "how to (very) instantly change the dropdown list".
To use php only (and a little javascript), this is a sample:
The first output:[select name="country" onchange="this.form.submit();"]
[option value="uk"]UK[/option]
[option value="us"]US[/option]
[/select][select name="cities"]
[option value="london"]London[/option]
[option value="manch"]Manchester[/option]
[/select][input type="submit" name="Submit" value="ok" /]
--- now when people change values in the first dropdown box, the form will be submitted without the "Submit" button... so in PHP you can do something like this:
$cities = /* the first country's cities' selectbox code */;if (isset ($_POST['country']))
{
// == Grab Cities for this country
// == Construct selectbox
}if (isset ($_POST['Submit']))
{
// == Real submit
}
--- that might give you something to start although there'll still be so many things to ne done, to make it work flawlessly.---
Fubar

You posted while I was writing :D
I know practically nothing about JavaScript though so I'm gonna have to look through it. I'm using I can integrate PHP and MySQL within JavaScript code?If it is a pure javascript, then no you cannot grab the database from serverside - unless you use ajax.
Or unless, you construct the whole javascript database (artists, song info, etc) on pageload by using PHP (if it's not too big, or it'll clog the user's browser).
---
Fubar

By the looks of it, the JavaScript I wanted to use from this site builds up a bunch of arrays that get loaded up when the user selects an option from the first drop-down list. So there is no way I can use my database information to populate these arrays instead of having a set list in the page?
The code I'm looking at is Here

Lists of Artist, Albums, and Titles is way too much information to be handled client side. So, I think the best aproach using PHP (since it is what you are most familiar with) is as follows.
As Laler explained above you will have the three select lists. When the page initially loads you would just populate the Artist list. When the user selects the artist it submits the page using the onChange event and when the page reloads it populates the Album list. Then follow the same process for the Album/Title relationship.
Here is some pseudo code that may help you to get started. I would make the first item in each list be (Select) with a value of "".
=================================
..grab list of artists from db, create artist select list (be sure to select the POSTed artist value if it was submitted.)if ($_POST[artist] && $_POST[artist]!="") {
..grab list of albums for the POSTed artist from db, create album select list (be sure to select the POSTed album value if it was submitted.)
} else {
..Just display the "(Select)" item for the album list
}
if ($_POST[album] && $_POST[album]!="") {
..grab list of titles for the POSTed album from db, create title select list (be sure to select the POSTed title value if it was submitted.)
} else {
..Just display the "(Select)" item for the title list
}
==================================That is a little sloppy and mayby not the best structure, but it may help you.
Michael J

So there is no way I can use my database information to populate these arrays instead of having a set list in the page?
If only some of data, you cannot, unless you use ajax.
But if you construct it in the beginning, then send them all on pageload, of course you can generate the javascript codes, by using php:
echo '<script type="text/javascript">' . "\n";
echo 'var arrItems1 = new Array();';
foreach ($data as $key => $val)
{
echo 'arrItems1[' . $key . '] = "' . $val . '";';
}...and so on
($data is your php data array taken from DB)
---
Fubar

again, Michae J posted while I was writing :D
-- in short, I agree with him that loading the whole data on javascript is not a good option.
---
Fubar

Thanks a lot for the responses guys. I had a look at a JavaScript book I found and seeing that and reading your recommendations again has really made me realise how using the DB to insert JavaScript array values really wouldn't be the best idea!
I'm probably going to have a good read through it for the time being anyway and get a bit more familiar with it in general before I try and get this done, but I probably will stick to what you've suggested. Thanks a lot!

![]() |
![]() |
![]() |

This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |