[xenia_jazz]

I found the AJAX chained select from another site with PHP with the getCities.php example. I got it working for one, but is it possible to add multiple chained selects to one page. The multiple selects will consist of the same information, too. I have two scenarios that I want to run.

#1 - Have first chained select working (Country --> Property --> Season). But after the first chain is complete, I want to have a "Would you like to add another?". If the person says yes, the form brings up another chained select with the same information (Country --> Property --> Season). How can this be achieved and what can I change to my javascript functions to just pass new info to it and also what would need to change to my selects?

#2 - Initally ask user how many properties would they like to add? If user chooses 5, then 5 chained selects would appear with the same information (Country --> Property --> Season). What can I do to the javascript and selects to make this an easy transition from only having one to multiple?

Thanks in advance for the information. I really need to get both scenarios working, if it's possible.

[xenia_jazz]

Okay, I've got my scenario #2 working, but I'm still looking to see if I can do scenario #1.

Anybody have any insights on this?
Thanks in advance.

[kath421]

I can't help with scenario 1, unfortunately, but I've been trying for ages to get scenario 2 to work as well. Is there any chance you'd be willing to share your method for getting multiple chained selects to work on the same page?

[xenia_jazz]

I couldn't find an alternative solution, but this seemed to work okay. Here's the link to the original code that I modified to my specifications.

For the multiples issue, I added a form post back to itself with a "how many would you like to add" dropdown. If the how many is set, then it displays x number of ajax chained selects. Then, the form is sent to the 2nd page for processing.

Added numProps for my "how many would you like to add"

Code:

<?if ($numProps <> 0){?>
		&nbsp;&nbsp;<?=$numProps?>
	<?}else{?><bR><bR>
	<select name="numProps">
		<option value="">Choose One
		<option value="1">1
		<option value="2">2
		<option value="3">3
		<option value="4">4
		<option value="5">5
	</select>
	<?}?>

Changes made to my html code for chained selects - for loop and including counter on variables of chained selects

Code:

<?for($i=1; $i<=$numProps; $i++){?>
<tR>
	<tD>	
	<?
	$result = mysql_query("select * from propregions order by rintl,rname") or die (mysql_error()); 
	?>
	<select id="dhtmlgoodies_prop1<?=$i?>" name="dhtmlgoodies_prop1<?=$i?>" onchange="getPropertyList(this,<?=$i?>)" >
	<option value="">Choose One
	<?
	while($r2=mysql_fetch_array($result))
	{    
	?><option value="<?echo $r2["rname"];?>"><?echo $r2["rname"];?><?
	}?>
	</select>
	
	</td>
	<td><select id="dhtmlgoodies_prop2<?=$i?>" name="dhtmlgoodies_prop2<?=$i?>" onchange="getSeasonList(this,<?=$i?>)">
		
		</select>
		<td><select id="dhtmlgoodies_season<?=$i?>" name="dhtmlgoodies_season<?=$i?>">
		
		</select>
		</td>
</tr>
<?}?>

Changes made to original javascript function - just added another variable that I also added to onchange from above.

Code:

function getPropertyList(sel,n)
{
	var stateCode = sel.options[sel.selectedIndex].value;
	document.getElementById('dhtmlgoodies_prop2'+n).options.length = 0;	// Empty city select box
	if(stateCode.length>0){
		var index = ajax.length;
		ajax[index] = new sack();
		
		ajax[index].requestFile = 'getProperties.php?stateCode='+stateCode;	// Specifying which file to get
		ajax[index].onCompletion = function(){ createProperties(index,n) };	// Specify function that will be executed after file has been found
		ajax[index].runAJAX();		// Execute AJAX function
	}
}

function createProperties(index,n)
{
	var obj = document.getElementById('dhtmlgoodies_prop2'+n);
	eval(ajax[index].response);	// Executing the response from Ajax as Javascript code	
}

On the second page, I just used the following to read the variables to eventually save to database.

Code:

<?for($i=1; $i<=$numproperties; $i++){?>
	<?
	$temp1 = $_REQUEST["dhtmlgoodies_prop1" . $i];
	$temp2 = $_REQUEST["dhtmlgoodies_prop2" . $i];
	$temp3 = $_REQUEST["dhtmlgoodies_season" . $i];
	?>
<tR>
	<tD><?=$temp1?></td>
	<tD><?=$temp2?></td>
	<tD><?=$temp3?></td>
</tr>
<?}?>

Like I said, it might not be the easiest way, but it works. Hope that helps.