Populating second list from the first one

pedroteixeira07

Hi there,

I could really aprecciate your help snice I'm going through this for a long time now.

I have to Selects inside a form.

In the firt one I have the different options already manually populated.

In the second one I need to populate it from my database according to what the user selects in the first one.

Can anyone help please?

Here is a pratical example:

One select list with countries as options: Portugal, Spain, France
And the second one with cities according with the country selected in the first select, let's say: Paris, Cannes, Lyon

Thank you very much in advance and sorry for my English

johanafm

This shows you how to do what you ask for by keeping all cities in the javascript, which can be done by hardcoding all values, or by generating the javascript with PHP. However, modifying the javascript to use ajax, so that the javascript issues a get request to the server to retrieve a list of cities for the selected country, should require little effort. W3schools tutorial should include the basic elements needed, and if not, just google for php ajax tutorial to get started.

<script type="text/javascript">
function countrySelected(country)
{
	var d = document;
	var s = d.getElementById('city');

var cities = getCities(country);
s.length = 1;
for (var i = 0; i < cities.length; ++i)
{
	var opt = d.createElement('option');
	opt.text = cities[i].name;
	opt.value = cities[i].id;
	s.appendChild(opt);
}
}

function getCities(country)
{
	if (country == 1)
		return Array({'id':1, 'name':'Paris'}, {'id':2, 'name':'Lyon'});
	else if (country == 2)
		return Array({'id':1, 'name':'Madrid'}, {'id':2, 'name':'Barcelona'});
}
</script>
</head>
<body style="width: 1000px;">

<form>
	<div>
		<select name="country" onchange="countrySelected(this.value);">
			<option value="0">Select country</option>
			<option value="1">France</option>
			<option value="2">Spain</option>
		</select>
	</div>
	<div>
		<select id="city" name="city"><option value="0">Select city</option></select>
	</div>
</form>

pedroteixeira07

Hi,

Thanks for your answer.. I'll try to work around from here.. although "the cities" can't be in the javascript, they are dynamic and populated from a SQL database so I need them not to be static.. on the other hand the countries are limited and they can be written in the javascript..

It's really hard to find example of this around the internet.. i've seen onchange() examples.. ajax.. php.. I really thought this would be more easy since it's something we see like in so many websites..

I'm able to populate my 2nd list like this....

     

<?php
$getUser_sql = 'SELECT * FROM `jos_cruzeiros`';
$getUser = mysql_query($getUser_sql); 
?>

<select name="subcat">
<?php while ($row = mysql_fetch_array($getUser)) {?>
<option value="<?php echo $row['ID']; ?>">
<?php echo $row['nome']; ?></option>
<?php } ?>

But I'd like for example to execute that query only when option "Cruzeiros" is selected in the first list

 <select name="cat"><option>-</option> <option>Circuitos</option><option>City Breaks </option><option>Cruzeiros</option><option>Can&aacute;rias</option><option>Escapadinhas</option><option>Familia</option><option>Solteiro</option><option>Aventura</option><option>Cultura</option><option>S&eacute;nior</option><option>Desporto</option><option>Lua de Mel</option><option>Gay-Friendly</option><option>Natureza</option><option>Religioso</option></select>

johanafm

I have a hard time believing it's hard to find examples. Google gives me 1.5 million results for "php ajax tutorial" and I find it hard to believe there is no relevant information in the first 10 search result links.

Like I said, the script I wrote you can easily be rewritten to use XHR. Just beware that the script I wrote won't work in all browsers. It's guaranteed to fail in pre-IE7, and wouldn't surprise me if it fails in some newer browser as well. It does work in FF 3.6, and I leave it to you to test/fix whatever needs fixing.
You'll probably want to exchange the eval for some javascript subset decoding function. Someone here recently posted this as a suggestion, but I havn't looked at this link myself though.


function setCities(cities)
{
	var d = document;
	var s = d.getElementById('city');

var cities = eval(cities);
s.length = 1;
for (var i = 0; i < cities.length; ++i)
{
	var opt = d.createElement('option');
	opt.text = cities[i].name;
	opt.value = cities[i].id;
	s.appendChild(opt);
}
}

function getCities(country)
{
	var xhr; 
	try
	{
		xhr = new XMLHttpRequest();
	}
	catch (e) 
	{
		// pre IE7 browsers need to be handled differently. google is your friend
	}

xhr.onreadystatechange  = function()
{ 
	 if(xhr.readyState  == 4)
	 {
		  if(xhr.status  == 200) 
			  setCities(xhr.responseText);
		  else 
			 alert("HTTP status code: " + xhr.status);	/* such as 404 (Not Found) etc */
	 }
}; 

   xhr.open('POST', "somefile.php", true);
   /* 	don't really need encodeURIComponent since it's always a numeric string
   		but if it contains arbitrary strings, it must be properly encoded
	You could also go with new FormData(yourFormElement);
   */
   xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   var data = 'country='+encodeURIComponent(country);
   xhr.setRequestHeader('content-length', data.length);
   xhr.send(data);
}
</script>
</head>
<body style="width: 1000px;">
<form>
	<div>
		<select name="country" onchange="getCities(this.value);">

pedroteixeira07

I'm not saying I can't find examples, but basically I can find two types. Both drop down lists being populated from the database or both from static values. I have a drop down already populated and according to that one I'd like to populate the second from the database. Ill work around ur examples and try this. Way out of my league