thank you very much for your help; it almost works as i want except when user select span using select04 - it shows corresponding value in select02, but this change doesn't populate select03. everything else works just fine.
my javascript code (part):
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 == 'select01') {
document.getElementById('select02Container').style.display = 'block';
document.getElementById('select04Container').style.display = 'block';
switch(selectedValue) {
case 'lt':
loadSelectElement('select02', [
['l08', '8'],
['l09', '9'],
['l10', '10'],
['l11', '11'],
['l12', '12'],
['l13', '13'],
['l14', '14'],
['l15', '15'],
['l16', '16'],
['l17', '17'],
['l18', '18'],
['l19', '19'],
['l20', '20'],
['l21', '21'],
['l22', '22'],
['l23', '23'],
['l24', '24']
]);
loadSelectElement('select04', [
['l08', '2.4'],
['l09', '2.7'],
['l10', '3.0'],
['l11', '3.4'],
['l12', '3.7'],
['l13', '4.0'],
['l14', '4.3'],
['l15', '4.6'],
['l16', '4.9'],
['l17', '5.2'],
['l18', '5.5'],
['l19', '5.8'],
['l20', '6.1'],
['l21', '6.4'],
['l22', '6.7'],
['l23', '7.0'],
['l24', '7.3']
]);
... continues for other combinations
return;
}
} // select01
if (selObj.name == 'select02') {
document.getElementById('select03Container').style.display = 'block';
// document.getElementById('select03').options[0].text = 'Select the model of your ' + selectedText;
switch(selectedValue) {
case 'l08':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;
case 'l09':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;
case 'l10':
loadSelectElement('select03', [
['CELG', 'CELG'],
['CELS', 'CELS']
]);
return;
... continues for other combinations
}
} // select02
}
function sm2f(id) {
var indexOfSelect = document.getElementById(id).selectedIndex;
var other = (id == 'select02') ? 'select04' : 'select02';
document.getElementById(other)[indexOfSelect].selected = "1";
}
function m2f(form) {
var m = parseFloat(form.lm.value);
var f = "";
if (!isNaN(m)) f = Math.round(m * 3.2808399 * 100)/100;
form.tlength.value = f;
}
function f2m(form) {
var f = parseFloat(form.tlength.value);
var m = "";
if (!isNaN(f)) m = Math.round(f * 0.3048* 100)/100;
form.lm.value = m;
}
function data_change(field)
{
var check = true;
var value = field.value; //get characters
//check that all characters are digits, ., -, or ""
for(var i=0;i < field.value.length; ++i)
{
var new_key = value.charAt(i); //cycle through characters
if(((new_key < "0") || (new_key > "9")) &&
!(new_key == ""))
{
check = false;
break;
}
}
//apply appropriate colour based on value
if(!check)
{
field.style.backgroundColor = "red";
}
else
{
field.style.backgroundColor = "white";
}
}
html:
...
<table border="1" width="100%" height="54">
<tr>
<td width="28%" height="24">
Length (total length of enclosure)</td>
<td width="21%" height="24"><input type="text" name="tlength" size="20" onkeyup="data_change(this);f2m(this.form);">
[ft] </td>
<td width="51%" height="24"> or <input type="text" name="lm" size="20" onkeyup="m2f(this.form);">
[m]</td>
</tr>
<tr>
<td width="28%" height="18">
<select name="select01" id="select01" onfocus="validateEmpty(tlength);" onchange="madeSelection(this);">
<option value="--">Select your frame</option>
<option value="fs">FS</option>
<option value="lt">LT</option>
</select><div id="select01Container">
</div>
</td>
<td width="21%" height="18">
<select name="select02" id="select02" onchange="madeSelection(this);sm2f('select02');">
<option value="--">Select your span [ft]</option>
</select> <div id="select02Container"> or </div>
<select size="1" name="select04" id="select04" onChange="sm2f('select04');">
<option value="--">Select your span [m]</option>
</select> <div id="select04Container"> </div>
</td>
<td width="51%" height="18"> <select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">Select your model</option>
</select> <div id="select03Container"> </div>
</td>
</tr>
</table>
...
just to fix populating select03 on change select02 and it should be done...
The following will take whatever is selected in one select, and select the corresponding value (by index) in the other. Have we finally found a solution?