populate select based on another select

[ttuser4]

hi, i was asked to modify existing code - add two more selects (select02 and select 03) - and populate them based on previous one (subcat3) which populated dynamically from database.

can you help me to make it work?
here is my existing code:


<script type="text/javascript">


function Left(str, n){
if (n <= 0)
return "";
else if (n > String(str).length)
return str;
else
return String(str).substring(0,n);
}

function loadSelectElement(selObjId, options) {
var selObj = document.getElementById(selObjId);
selObj.options.length = 1;
if (typeof(window.clientInformation) != 'undefined') {
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]));
} else {
for (var loop=0; loop<options.length; loop++) selObj.add(new Option(options[loop][1], options[loop][0]), null);
}
}

function madeSelection(selObj) {
var selectedValue = selObj.options[selObj.selectedIndex].value;
var selectedText = selObj.options[selObj.selectedIndex].text;
if (selectedValue == '--') return;
if (selObj.name == 'subcat3') {
document.getElementById('select02Container').style.display = 'block';

switch(Left(selectedValue,4) {

case 'CDFS':
loadSelectElement('select02', [
['CS1', 'R1'],
['CS2', 'R2'],
['CS3', 'R3']
]);
return;

case 'CDLS':
loadSelectElement('select02', [
['CS1', 'R1'],
['CS2', 'R2'],
['CS3', 'R3']
]);
return;

case 'SDFS':
loadSelectElement('select02', [
['SS1', 'R1'],
['SS2', 'R2'],
['SS3', 'R3']
]);
return;

case 'SDLS':
loadSelectElement('select02', [
['SS1', 'R1'],
['SS2', 'R2'],
['SS3', 'R3']
]);
return;

case 'CEFS':
loadSelectElement('select02', [
['CS1', 'R1'],
['CS2', 'R2'],
['CS3', 'R3']
]);
return;

case 'CELS':
loadSelectElement('select02', [
['CS1', 'R1'],
['CS2', 'R2'],
['CS3', 'R3']
]);
return;

case 'SEFS':
loadSelectElement('select02', [
['SS1', 'R1'],
['SS2', 'R2'],
['SS3', 'R3']
]);
return;

case 'SELS':
loadSelectElement('select02', [
['SS1', 'R1'],
['SS2', 'R2'],
['SS3', 'R3']
]);
return;

case 'CEFG':
loadSelectElement('select02', [
['CG2', 'R2'],
['CG3', 'R3']
]);
return;

case 'CELG':
loadSelectElement('select02', [
['CG2', 'R2'],
['CG3', 'R3']
]);
return;

case 'CDFG':
loadSelectElement('select02', [
['CG2', 'R2'],
['3', 'R3']
]);
return;

case 'CDLG':
loadSelectElement('select02', [
['CG2', 'R2'],
['CG3', 'R3']
]);
return;

case 'TEFS:
loadSelectElement('select02', [
['TS2', 'R2'],
['TS3', 'R3']
]);
return;

case 'TELS':
loadSelectElement('select02', [
['TS2', 'R2'],
['TS3', 'R3']
]);
return;

case 'TDFS':
loadSelectElement('select02', [
['TS2', 'R2'],
['TS3', 'R3']
]);
return;

case 'TDLS':
loadSelectElement('select02', [
['TS2', 'R2'],
['TS3', 'R3']
]);
return;
}
}

if (selObj.name == 'select02') {
document.getElementById('select03Container').style.display = 'block';

switch(selectedValue) {

case 'CS1':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70'],
['77', '77'],
['84', '84'],
['91', '91'],
['98', '98'],
['105', '105'],
['112', '112'],
['119', '119'],
['126', '126']
['133', '133'],
['140', '140']
]);
return;

case 'SS1':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70'],
['77', '77'],
['84', '84'],
['91', '91'],
['98', '98'],
['105', '105'],
['112', '112'],
['119', '119'],
['126', '126']
['133', '133'],
['140', '140']
]);
return;

case 'CS2':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70'],
['77', '77'],
['84', '84'],
['91', '91'],
['98', '98'],
['105', '105'],
['112', '112'],
['119', '119'],
['126', '126']
['133', '133'],
['140', '140']
]);
return;

case 'SS2':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70'],
['77', '77'],
['84', '84'],
['91', '91'],
['98', '98'],
['105', '105'],
['112', '112'],
['119', '119'],
['126', '126']
['133', '133'],
['140', '140']
]);
return;

case 'CS3':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70']
]);
return;

case 'SS3':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56'],
['63', '63'],
['70', '70']
]);
return;

case 'CG2':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35'],
['42', '42'],
['49', '49'],
['56', '56']
]);
return;

case 'CG3':
loadSelectElement('select03', [
['21', '21'],
['28', '28'],
['35', '35']
]);
return;
}
} // select02
}
</script>
...
<body>
...

<tr>
<td> <b>2. Select your frame type:</b> </td>
<td><?
include('../global/includes/_db_info.php');
mysql_connect($dbserver,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");
$connection = mysql_connect($dbserver,$username,$password);

$load=@$_GET['load'];
if (empty($load)) {
$load=0;
}

$quer2=mysql_query("select `bays`.`FS` AS `cat_id`,if((`bays`.`FS` = -(1)),'Free standing','Lean to') AS `category` from `bays` group by `bays`.`FS` order by `bays`.`FS`", $connection);

$cat=$HTTP_GET_VARS['cat'];
if (isset($cat) and strlen($cat) > 0) {
$quer=mysql_query("SELECT DISTINCT span FROM bays where fs=$cat group by span order by span", $connection);
}

//bprice/(bays.length*span)
$cat3=$HTTP_GET_VARS['cat3'];
if(isset($cat3) and strlen($cat3) > 0){

$quer3=mysql_query("SELECT qbay.type as type, qbay.load as myload, qbay.bprice/(qbay.length*qbay.span) as myprice, qbay.length as width FROM qbay where qbay.span=$cat3 and qbay.fs=$cat order by myprice, qbay.type", $connection);

//$quer3=mysql_query("SELECT bays.type, bays.load as myload, (bprice*lpmu*mfgmu)/(bays.length*span) as myprice, bays.length as width FROM bays where span=$cat3 and fs=$cat and bays.load>=$load order by (bprice*lpmu*mfgmu)/(bays.length*span), bays.type", $connection);
}

echo "<select name='cat' onchange=\"reload(this.form)\">"."\n"."<option value=''>--Select here--</option>"."\n";
while($noticia2 = mysql_fetch_array($quer2)) {
if($noticia2['cat_id']==@$cat){echo "<option selected value='$noticia2[cat_id]'>$noticia2[category]</option>"."\n";}
else{echo "<option value='$noticia2[cat_id]'>$noticia2[category]</option>"."\n";}
}
echo "</select>"."\n"."</td>"."<td width=\"*\"><b>F</b> - Free standing: <img src=\"/dealer/images/sh_e.gif\" width=\"39\" height=\"23\" alt=\"Free standing\" /> | <b>L</b> - Lean-to: <img src=\"/dealer/images/lean2.gif\" width=\"30\" height=\"26\" alt=\"Lean to\" /></td>"."\n";
echo "\n"."</tr>"."\n"."<tr>"."\n"."<td> <b>2. Select your span:</b> </td>"."\n";

echo "<td><select name='subcat' onchange=\"reload3(this.form)\"><option value=''>--Select here--</option>"."\n";
while($noticia = mysql_fetch_array($quer)) {
$spanm=round($noticia[span]*0.3048,2);
$mystring=intval($noticia[span])."ft :: ".$spanm."m";
if($noticia['span']==@$cat3){echo "<option selected value='$noticia[span]'>$mystring</option>"."\n";}
else{echo "<option value='$noticia[span]'>$mystring</option>"."\n";}
}
echo "</select>"."\n"."</td>"."\n"."<td>&nbsp;</td>"."\n"."</tr>";
echo "\n"."<tr>"."\n"."<td> <b>4. Select your model:</b> </td>"."\n";
echo "<td><select name='subcat3' id='suncat3' onchange='madeSelection(this);'>"."\n"."<option value=''>--Select here--</option>"."\n";
while($noticia = mysql_fetch_array($quer3)) {
$mystring2=$noticia[type]." : ".number_format($noticia[myprice],2)."$/sqf : ".number_format($noticia[width],0)."'bays : ".number_format($noticia[myload],0)."psf";
echo "<option value='$noticia[type]$noticia[width]'>$mystring2</option>"."\n";
}
echo "</select><div id='select01container'>"."\n"."</td>"."\n"."<td>Profile: <b>C</b> 125 (Classic) | <b>S</b> 150 (Select) | <b>T</b> 190 (Titan)<br /><br /> Model: <b>E</b>
<img src=\"/dealer/images/sh_e.gif\" width=\"39\" height=\"23\" alt=\"E Shape 4 Frames\" /> |
<b>D</b> <img src=\"/dealer/images/sh_d.gif\" width=\"60\" height=\"24\" alt=\"D Shape 6 Frames\" /> |
<b>V</b> <img src=\"/dealer/images/sh_v.gif\" width=\"67\" height=\"23\" alt=\"D Shape 6 Frames\" />
</td>"."\n"."</tr>";

?>
<tr>
<td><b>5. Select retraction type:</b> </td>
<td>
<select name="select02" id="select02" onchange="madeSelection(this);">
<option value="--">--Select here--</option>
</select><div id="select02Container">
<td> </td>
</tr>
<tr>
<td><b>6. Optimal length:</b> </td>
<td width="21%" height="18"> <select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">--Select here--</option>
</select><div id="select03Container">

</div></td>
...

 

[Diancecht]

So what did you try so far and what problems are you getting?

Cheers,
Dian

 

[ttuser4]

I added these:

function Left
function loadSelectElement
function madeSelection

and html

<td><b>5. Select retraction type:</b> </td>
<td>
<select name="select02" id="select02" onchange="madeSelection(this);">
<option value="--">--Select here--</option>
</select><div id="select02Container">
<td> </td>
</tr>
<tr>
<td><b>6. Optimal length:</b> </td>
<td width="21%" height="18"> <select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">--Select here--</option>
</select><div id="select03Container">

</div></td>

and it does nothing - no values at these two new selects.

 

[ttuser4]

never mind, i used different approach and it is working.
used js:

function PopLength() {

var RetroList = document.form1.retro;
var TypeList = document.form1.subcat3;

// Clear out the list of teams
ClearOptions(document.form1.olength);

if (RetroList[RetroList.selectedIndex].value == "1") {
AddToOptionList(document.form1.olength, "21", " 3 bays :: 21ft :: 6.4m");
AddToOptionList(document.form1.olength, "28", " 4 bays :: 28ft :: 8.5m");
AddToOptionList(document.form1.olength, "35", " 5 bays :: 35ft :: 10.7m");
AddToOptionList(document.form1.olength, "42", " 6 bays :: 42ft :: 12.8m");
AddToOptionList(document.form1.olength, "49", " 7 bays :: 49ft :: 14.9m");
AddToOptionList(document.form1.olength, "56", " 8 bays :: 56ft :: 17.1m");
AddToOptionList(document.form1.olength, "63", " 9 bays :: 63ft :: 19.2m");
AddToOptionList(document.form1.olength, "70", " 10 bays :: 70ft :: 21.3m");
AddToOptionList(document.form1.olength, "77", " 11 bays :: 77ft :: 23.5m");
AddToOptionList(document.form1.olength, "84", " 12 bays :: 84ft :: 25.6m");
AddToOptionList(document.form1.olength, "91", " 13 bays :: 91ft :: 27.7m");
AddToOptionList(document.form1.olength, "98", " 14 bays :: 98ft :: 29.9m");
AddToOptionList(document.form1.olength, "105", " 15 bays :: 105ft :: 32.0m");
AddToOptionList(document.form1.olength, "112", " 16 bays :: 112ft :: 34.1m");
AddToOptionList(document.form1.olength, "119", " 17 bays :: 119ft :: 36.3m");
AddToOptionList(document.form1.olength, "126", " 18 bays :: 126ft :: 38.4m");
AddToOptionList(document.form1.olength, "133", " 19 bays :: 133ft :: 40.5m");
AddToOptionList(document.form1.olength, "140", " 20 bays :: 140ft :: 42.7m");
AddToOptionList(document.form1.olength, "0", "custom");
}

if (RetroList[RetroList.selectedIndex].value == "2" && TypeList[TypeList.selectedIndex].value.substring(3,4) == "S") {
AddToOptionList(document.form1.olength, "21", " 3 bays :: 21ft :: 6.4m");
AddToOptionList(document.form1.olength, "28", " 4 bays :: 28ft :: 8.5m");
AddToOptionList(document.form1.olength, "35", " 5 bays :: 35ft :: 10.7m");
AddToOptionList(document.form1.olength, "42", " 6 bays :: 42ft :: 12.8m");
AddToOptionList(document.form1.olength, "49", " 7 bays :: 49ft :: 14.9m");
AddToOptionList(document.form1.olength, "56", " 8 bays :: 56ft :: 17.1m");
AddToOptionList(document.form1.olength, "63", " 9 bays :: 63ft :: 19.2m");
AddToOptionList(document.form1.olength, "70", " 10 bays :: 70ft :: 21.3m");
AddToOptionList(document.form1.olength, "77", " 11 bays :: 77ft :: 23.5m");
AddToOptionList(document.form1.olength, "84", " 12 bays :: 84ft :: 25.6m");
AddToOptionList(document.form1.olength, "91", " 13 bays :: 91ft :: 27.7m");
AddToOptionList(document.form1.olength, "98", " 14 bays :: 98ft :: 29.9m");
AddToOptionList(document.form1.olength, "105", " 15 bays :: 105ft :: 32.0m");
AddToOptionList(document.form1.olength, "112", " 16 bays :: 112ft :: 34.1m");
AddToOptionList(document.form1.olength, "119", " 17 bays :: 119ft :: 36.3m");
AddToOptionList(document.form1.olength, "126", " 18 bays :: 126ft :: 38.4m");
AddToOptionList(document.form1.olength, "133", " 19 bays :: 133ft :: 40.5m");
AddToOptionList(document.form1.olength, "140", " 20 bays :: 140ft :: 42.7m");
AddToOptionList(document.form1.olength, "0", "custom");
}

if (RetroList[RetroList.selectedIndex].value == "2" && TypeList[TypeList.selectedIndex].value.substring(3,4) == "G") {
AddToOptionList(document.form1.olength, "21", " 3 bays :: 21ft :: 6.4m");
AddToOptionList(document.form1.olength, "28", " 4 bays :: 28ft :: 8.5m");
AddToOptionList(document.form1.olength, "35", " 5 bays :: 35ft :: 10.7m");
AddToOptionList(document.form1.olength, "42", " 6 bays :: 42ft :: 12.8m");
AddToOptionList(document.form1.olength, "49", " 7 bays :: 49ft :: 14.9m");
AddToOptionList(document.form1.olength, "56", " 8 bays :: 56ft :: 17.1m");
AddToOptionList(document.form1.olength, "0", "custom");
}

if (RetroList[RetroList.selectedIndex].value == "3" && TypeList[TypeList.selectedIndex].value.substring(3,4) == "S") {
AddToOptionList(document.form1.olength, "21", " 3 bays :: 21ft :: 6.4m");
AddToOptionList(document.form1.olength, "28", " 4 bays :: 28ft :: 8.5m");
AddToOptionList(document.form1.olength, "35", " 5 bays :: 35ft :: 10.7m");
AddToOptionList(document.form1.olength, "42", " 6 bays :: 42ft :: 12.8m");
AddToOptionList(document.form1.olength, "49", " 7 bays :: 49ft :: 14.9m");
AddToOptionList(document.form1.olength, "56", " 8 bays :: 56ft :: 17.1m");
AddToOptionList(document.form1.olength, "63", " 9 bays :: 63ft :: 19.2m");
AddToOptionList(document.form1.olength, "70", " 10 bays :: 70ft :: 21.3m");
AddToOptionList(document.form1.olength, "0", "custom");
}

if (RetroList[RetroList.selectedIndex].value == "3" && TypeList[TypeList.selectedIndex].value.substring(3,4) == "G") {
AddToOptionList(document.form1.olength, "21", " 3 bays :: 21ft :: 6.4m");
AddToOptionList(document.form1.olength, "28", " 4 bays :: 28ft :: 8.5m");
AddToOptionList(document.form1.olength, "35", " 5 bays :: 35ft :: 10.7m");
AddToOptionList(document.form1.olength, "0", "custom");
}

}

function ClearOptions(OptionList) {
// Always clear an option list from the last entry to the first
for (x = OptionList.length; x >= 0; x = x - 1) {
OptionList[x] = null;
}
}


function AddToOptionList(OptionList, OptionValue, OptionText) {
// Add option to the bottom of the list
OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}