asked on

dynamically changing dropdown caption based on drop down selection

Hello everyone,

I am trying to set this up so that when I change the main dropdown (lstMake) that the text for the caption in front of the second drop down changes automatically based on the selection from the first. I am using a slightly modified version of this code.

http://www.ashleyit.com/forums/list.php?6

What I want to be able to do is not pass the caption with the selectbox call but have it in the HTML as a DIV tag I think it is called but i can't seem to get it working. I think it is because the javascript call creates the box dynamically, not sure though. If I put another dropdown box in and change the doIt function it works but I want to tie it into the code to dynamically populate the other drop downs.

Here is my code.

<html>
<head>
<title>JSRS Select Demo</title>
<script language="javascript" src="jsrsClient.js"></script>
<script language="javascript" src="selectphp.js"></script>

<script>
function doIt(theForm){
//set ARRAYS
var names = new Array('Canada','United States');
var pagerType = new Array('alpha', 'alpha', 'numeric', 'numeric');
//set other variables
var arrayPos;
var theSelect = theForm.lstMake

var theDiv = document.getElementById('dynArea');
password=prompt("That's a password-check with an Inputbox", "Enter password here");
//if the user did not select the "Select Someone" option
if(theSelect.value != 0){
//find out whose name was selected and save that i value
for(i=0;i<names.length;i++){
if(names[i] == theSelect[theSelect.selectedIndex].text)
arrayPos = i;
}

//write the new form element to the div
if(names[arrayPos] == 'United States')
theDiv.innerHTML = 'State:'
else
theDiv.innerHTML = 'Prov:'
}

//the user selected the "Select Someone" option so we clear the div
else
theDiv.innerHTML = ''
}
</script>

<style>
</style>
</head>

<?php
$make = isset($_POST['lstMake']) ? $_POST['lstMake'] : -99;
$model = isset($_POST['lstModel']) ? $_POST['lstModel'] : -99;
$options = isset($_POST['lstOptions']) ? $_POST['lstOptions'] : -99;
?>
<body onload="preselect('<?php echo $make;?>', '<?php echo $model;?>', '<?php echo $options;?>', 1);" onhelp="jsrsDebugInfo();return false;">
<h2></h2><table width=500 align=center cellpadding="0" cellspacing="0">

<TD align=center>
<form name="QForm" method="post" action="Advance.php">

<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr></tr>
<td width="359"><table align=center width=359>
<tr>
<img src="newversion/images/finahome.gif">
<td width="55"><font color="#333333" size="3" face="Tahoma, Verdana, Arial, Helvetica, sans-serif"></font>Country:</td>
<td width="287"><? SelectBox ("", "lstMake","onChange='doIt(this.form)'"); ?></td>
</tr>
<tr>
<td><div id="dynArea"></div></td>
<td>
<? SelectBox ("", "lstModel", ""); ?>
</td>

</tr>
<tr>
<td>City:</td>
<td colspan=2>
<?SelectBox ("", "lstOptions", ""); ?>
</td>
</tr>
<tr>
<td colspan=2><input type=submit name=s1 value="Search Listings">
</a> </td>
</tr>
</table> </td>
<td width="172"><img src="images/pic3.jpg" width="172" height="160"></td>
</tr>
</table>
</form>

</TD>
</TR>
<tr>
<TD align=center class=TitleLinks><div align="left">
<hr size="1">
<img src="newversion/templates/images/private.gif" width="327" height="33">
</div></TD>
</TR>
<tr>
<TD align=center class=TitleLinks><div align="center">
<table width="394" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="394">For Sale by Owner homeowners can enjoy listing their
home on the market with our friendly private lisitings service to
list property quickly and easily.</td>
</tr>
</table>
<br>
</div></TD>
</TR>
<tr>
<TD align=center class=TitleLinks><div align="left">
<hr size="1">
<img src="newversion/templates/images/realtor.gif" width="209" height="33">
</div></TD>
</TR>
<tr>
<TD align=center class=TitleLinks> <table width="394" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="394">Realtors can benefit in additional features not included
in our private listings. Register as a realtor and receive your Realtor
webpage. </td>
</tr>
</table></TD>
</TR>
</table>
<tr ALIGN="LEFT">
<td width="15%"> </td>
<td align="left"> 
</td>
</tr>
<?php

function SelectBox( $Label, $selectName , $event){
?>

<?php echo "<style='font-size: 7pt;'>", $Label, "</style>" ?><select name="<?php echo $selectName ?>" <? echo $event ?> style="font-size: 7pt;">
<option></option><option></option><option></option>
<option>--------- Not Yet Loaded ---------</option>
</select>
<?php
}
?>

Any help would be appreciated. Thanks in advance

TimYates

Did you mean to post this Q in the PHP area?

This is JSP...

mitai

ASKER

yeah, but it is javascript that I am looking for. see function doIT

ASKER CERTIFIED SOLUTION

koppcha

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

koppcha

May be it could be of some help