Chain select (AJAX)

This works slick. Here's a little variation that would make an <option> become <option selected> based on the first value.

So you could look up the first value entered in your database and then make that selected in your second select menu. You'd have to return the value of the <option id> from your database.

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("city");
var curCity = document.getElementById(response);
curCity.selected = true;
}
}
}

function initCs() {
var memberLogin=document.getElementById('country');
memberLogin.onchange=function() {
if(this.value!="") {

fillSelect(this.value);
}
}
fillSelect(country.value);
}

AURILEIDE,
I've just checked this page on IE6 and IE7, and as far as I can see, it works fine. What seems to be the problem?

Maybe he's referring to my Comment. It's not working in IE, trying to debug it. Not sure why, it's not very different from your original.

It works for the most part, but there's something fishy with IE's cache of the results from the database.

Sorry, not trying to turn this into a forum, but the problem was with IE using the cache. You need to force it to grab new data from the DB on every onchange event.

Here's some methods, using the header PHP commands worked for to get this script working.

http://www.greenash.net.au/posts/thoughts/an-ie-ajax-gotcha-page-caching

Hello,

Just wondering if there is a way to store the arrays into a database...and then say make a form to where you could add to the arrays.

Like say you wanted to add a city to the United States...

i too, would also like to know if its possible to have the cases and arrays outputted by a database?

/\/\ongoose / Nick,
Yeah, it's easy enough to use a database to do this. I would have done that here, but I just couldn't be bothered.
The query to the database would look something like this:<?php

$country=@$_GET['country'];
$q = mysql_query("SELECT city FROM cities WHERE country='$country' ORDER BY city ASC");
while ($r = mysql_fetch_assoc($q)){
echo "|".$r['city'];
}

?>
This is assuming you have a database of cities with maybe three fields - id, city, country.

I hope that helps.

I want a script with two chained selects, the first one is for a main category, all the categories are extracted from a database.
The second select contains subcategories which are also selected from a database. Is this remotely possible?

Simon,
Yeah. Here's an example of something like that. You'll need this text file too. That's the php file referred to in the source of the demo. The example I've just given you a link to is not drawing things from a database, but hopefully one of my replies above will help with that.

Good luck.

I have this script up and running, but I need 2 or more dependent selects, (not just 1). I'm running into a lot of trouble tyring to reuse the XHR object in IE for the 2nd and 3rd, etc. dependent select fields. I've checked the solutions on http://keelypavan.blogspot.com/2006/03/reusing-xmlhttprequest-object-in-ie.html and other pages with no luck. Any thoughts on what the problem might be ?

Hi,
I am not sure why not, but it works very well with Firefox, not with IE. Any idea, what I may be missing?
Sam

I opened the link with IE from item # 11 above, posted by BonRouge that also did not work. Thanks.

Sam,
Sorry about the very late response (maybe you'll never see this... ).
I see what you mean about the link in #11 - that doesn't work in IE. (I'll try to get back to it soon and sort it out). This page works fine for me in IE though, so I'm not sure what your problem would be there.

Hi Bon,
Does the script from Item # 11 works on your PC, when you click that one. On mine, it not only did not work, but also showed duplication of the contents of the second selection everytime I made a selection from that option list. Please advice!
-Sam

Thanks, Bon. Script works fine, including the code that retrieves cites and countries from a db.

i need the second chained box to have a value like this:
<option value="1">Town Branch</option>. how do i print this? the data is gotten from a database, a user selects a bank and then the bank's branches are called from the database

I made a little modification to get values in the selecboxes.

here is the new function go:

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("city");
var cities=response.split('|');
for (i=1; i<cities.length; i++) {
var values=cities[ i ].split(';');

var x=document.createElement('option');
x.setAttribute('value', values[0]);
var y=document.createTextNode(values[1]);
x.appendChild(y);
list.appendChild(x);
}
}
}
}

I have added two new lines:

var values=cities[ i ].split(';');
x.setAttribute('value', values[0]);

Both inside the for-loop. Now the only thing you hafte to do is change the .php file to echo in this format:

|id;text|id;text

Ex:

|1;London|2;Manchester

It works fine :-)

Sorry, I also alter the line:


var y=document.createTextNode(values[1]);


Hi BonRouge,

Thank you for this wonderful code.

I tried your three field chained select menu given at #11 and I am not having any luck making it work on IE6. However it's OK with FireFox.

Your help will be much appreciated.

Regards
Goody

ah, same here! Please help.


fujiwarachiaki .... at gmail.

Would it be possible to post all the code files in a zip, on here? Also, how would it work if the data for each select needs to come from a db table?

Hello,

Somehow I manage to workout this code and it acctualy helps me
Some time it took time for that second 'citiy' combo box to load.

I wonder is it possible to implement some (ajax) animation .gif that will disappear when 'city' list is loaded ?

hope you get me

Best regards,
DM

hi there,

i am a newbie on AJAX.. i just copy&pasted the codes you wrote down here.. now, i just don't know where to put the window.onLoad=initCs() code.. i guess because of this issue i couldn't make the script run

nothing happens when i click on the countries from the dropdown menu..

Do you modify more I need 2 selectionb things life contry selected come to state and state selected to comes the area. etc..

Hi Guys, I'm pretty new to all of this and just need some guidance here. I am in need of two select boxes such as this template is designed for. The first box is for the 'Make' of a vehicle, and the second, 'Model' of vehicle that auto-populates depending on first select box selection. Anyhow, if someone would be kind enough to explain to me where the groups of code shown in the tutorial are to be placed. I copy and pasted the html code into the a text widget to place the select box in the area of the website I want. I am just unsure where the javascript code is placed along with this tidbit of JS - window.onload=initCs; . If I understand this somewhat, as I believe I do, the PHP script is placed in a php file titled: csa_ajax.php .

My last question is, once I get everything in place, can I just edit the id names and change them to suit my needs?

Thanks in advance,
Josh

Thanks Anders and all of you..

I was exactly looking to split this sort of thing in JS with the response text in the form: ?VALUE1;DESCRIPTION i.e. <option value="VALUE1">DESCRIPTION</option> .

I used '?' since I used '|' for some other purpose.
I got a very similar function like #19 Ander's with my own parameters and stuffs.

Really useful and many thanks again...

You can database without using the swith() function

Like so:

<?php
include("link.php");
if(isset($_GET['servcCategory'])){
$servcCategory=$_GET['servcCategory'];


$SRVC2SQL="SELECT COLUMN FROM TABLE WHERE ServiceCategory='$servcCategory' ORDER BY ServiceSubcategory ASC";
$SRVC2SQLResults=mysql_query($SRVC2SQL, $link) or die(mysql_error());
while ($SVC2row = mysql_fetch_array($SRVC2SQLResults)){
$SVCSUB = $SVC2row['ServiceSubcategory'];

echo "obj.options[obj.options.length] = new Option('$SVCSUB','$SVCSUB');\n";
}

}
?>

hi i want two chained select box 1 with options to select telephone set and in second select box quantity and when we select quantity ten there,price should be appeared next to quantity select box...........can any1 help ??????????????

Bon,
Great script and have it working fine as able to fill both select boxes from my database. One query: If a particular value in the second select box has already been selected by a user (and stored on my DB) is it possible to have the javascript add SELECTED to that particular option next time they visit the page?
Thanks

Also I forgot to add- is it possible to have the menu more than 2 levels deep?
Andy

Hai Bon,
thank for the code but i have a little big problem with it.
how i want to use two chain select in same page?i having a hard time solving it tq.

Not sure why but I get </BODY></HTML> on the last option.

ok, for those of you who wants to have more than 2 selected boxes, for example, i'm having 3 selected boxes, the second is depended on the first one, and the third one is depended on the second one, you need to have multiple functions:

function fillSelect(itm)
{
var url = "http://develop/web/Inventory_AJAX/inventory_ajax.php?item=" + escape(itm);
//using ajax here
request.open("GET", url, true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
var response = request.responseText;
var list=document.getElementById("idmake");
var makes=response.split('|');
for (i=0; i<makes.length; i++)
{
var x=document.createElement('option');
var y=document.createTextNode(makes[i ]);
x.appendChild(y);
//Damn Microsoft
//**important, the following line cost
//me freaking 3 days of researching, you have to set //the value of each 'option', otherwise, the stupid //IE won't read it
x.setAttribute("value",makes[i ]);
list.appendChild(x);
}
}
}
}
request.send(null);
}

function fillSelect2(itm, mk)
{
var url = "http://develop/web/Inventory_AJAX/inventory_ajax2.php?item=" + escape(itm) + "&make=" + escape(mk);
request.open("GET", url, true);
request.onreadystatechange = function()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
var response = request.responseText;
var list=document.getElementById("idmodel");
var models=response.split('|');
for (i=0; i<models.length; i++)
{
var x=document.createElement('option');
var y=document.createTextNode(models[i ]);
x.appendChild(y);
list.appendChild(x);
}
}
}
}
request.send(null);
}

function initCs()
{
var type=document.getElementById('idtype');
type.onchange=function()
{
if(this.value!="")
{
var list=document.getElementById("idmake");
while (list.childNodes[0])
{
list.removeChild(list.childNodes[0])
}
fillSelect(this.value);
}

else
{
document.getElementById('idmake').options.length = 0;
document.getElementById('idmodel').options.length = 0;
}
}

var make=document.getElementById('idmake');
make.onchange=function()
{
if(this.value!="")
{
var list=document.getElementById("idmodel");
while (list.childNodes[0])
{
list.removeChild(list.childNodes[0])
}
fillSelect2(type.value, this.value);
}

else
{
document.getElementById('idmodel').options.length = 0;
}
}
}

window.onload=initCs;


sorry, the important line should be

x.setAttribute("value",makes[i ]);

you have my apology

ok, this website is not taking the open and close bracket sign '[' and ']'

im just gonna write it in words
x.setAttribute("value",makes *open bracket sign here* 'i' without single quote *and then close bracket*);

Sorry for the spamming.

@windjared Thank you for posting that solution to work around the IE nightmare!

For those who need a little help on where to place this line, refer to the original code:

for (i=1; i<cities.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(citiesBRACKETiBRACKET);

--> ** x.setAttribute("value",citiesBRACKETiBRACKET)

x.appendChild(y);
list.appendChild(x);
}

Obviously you'll replace BRACKET with the appropriate open or close bracket character.

Hi guys,
I think we all need a little bit of clearness... all these modifying the scripts... could someone (BonRouge, i.e.) do it, please? I'm losing my head! ;-)

Thanx!

Please could someone guide on how to do this step by step......Please i dont know where to place the window.onload=initCs . Please help me out

Please could someone guide on how to do this step by step......Please i dont know where to place the window.onload=initCs . Please help me out

put em at the top of the javascript code.
before the..

'var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)'..

and it would works..

my band

what if you have multiples of this chained select.
the id will be the same,but then you will have change in country[0] corresponding to city[0], change in country[1] corresponding to city[1] and so on...
How to implement this script in array form?

jy,
Here's a page with many of these: chain select js boxes. The difference is that this example uses arrays rather than AJAX and a database. I hope you can use that or see how to adapt it.

Can you post the code, i am not sure how to modify the response page,

I was able to solve this by first creating a loop in php by creating multiple drop down list , and giving them different ids, then use javascript to get the id from the dropdown list.

dunno if people still checking this but I have gotten this script to work perfectly... The only thing I am having trouble with is trying to load the page with the 3 drop downs filled in with what has been stored per user.

I can get the first to populate with the 'selected' element but the send list loads all list items and no selected.

I have the 2nd and 3rd values in both my index page and my chain.php page but I can't figure out where to put them...

hi any body write how to save this form. That means if i add submit button does it work. how this submit button save data to mysql database table

Hi,

Is anyone up for making the following three wheel spinner chained dependency from data in a MYSQL DB?

Can use data country, city, football team.

http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch/comment-page-4#comment-23606

If so let me know and we can talk about effort required and fee etc.

Thanks

hi any body help me to save this form. That means if i add submit button does it work. how this submit button save data to mysql database table.

Using onchange="javascript_function();" would be so much better.

Caspar,
Why would that be?

im new to this ajax: and i have taken the above code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}

function fillSelect(country) {
var url = "csa_ajax.php?district=" + escape(country);
//alert(url);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("taluka");
//alert(list);
var cities=response.split('|');
for (i=1; i<cities.length; i++) {
var x=document.createElement('option');
var y=document.createTextNode(cities);
x.appendChild(y);
list.appendChild(x);
}
}
}
}

function initCs() {
var country=document.getElementById('district');
//alert(country);
country.onchange=function() {
if(this.value!="") {
var list=document.getElementById("taluka");
//alert(list);
while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
fillSelect(this.value);
}
}
fillSelect(country.value);
}

</script>

if i remove the above <DOCtype >then only it is workin