Hello,
I have a problem which I cannot solve.
My first select list is built reading elements from a database... no problem.
Now, when the user clicks on one list element, a second list should be shown but the list depends on the
1st list element.
Once the user has clicked on the 2nd list,
a 3rd list should appear that depends on the 2nd list element.
Here is what I have written so far.... It almost works ... but I don't know at all how to use AJAX.
Please, look at the comment I have added where I think that AJAX is needed.
I REALLY need help on this!
THanks
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<title>Dynamic select elements</title>
<script type="text/javascript">
<!--
function loadSelectElement(selObjId, options)
{
var selObj = document.getElementById(selObjId);
// clear the target select element apart from the "select your..." option
selObj.options.length = 1;
// copy options from array of [value, pair] arrays to select box
// IE doesn't work if you use the DOM-standard method, however...
if (typeof(window.clientInformation) != 'undefined')
{
// IE doesn't take the second "before" parameter...
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') // First select list
{
document.getElementById('select02Container').style.display = 'block';
document.getElementById('select02').options[0].text = 'Select 2nd value for ' + selectedText.toLowerCase();
// Call needed to get the values of the 2nd select list that depends
// on the "selectedText" chosen by the user in the 1st list
// The call to AJAX should return an array with the values
// Those values will be used to fill the "loadSelectElement"
// Here the select is hard coded since I don't know how to do it
loadSelectElement('select02', [
['select02_val1', 'val1'],
['select02_val2', 'val2'],
]);
} // select01
if (selObj.name == 'select02') // "2nd select list
{
document.getElementById('select03Container').style.display = 'block';
document.getElementById('select03').options[0].text = 'Select the 3rd value for ' + selectedText;
// ANother call is needed to get the values of the 3rd select list that
// depends on the "selectedText" chosen by the user in the 2nd list
// The call to AJAX should return an array with the values
// Those values will be used to fill the "loadSelectElement"
// Here the select is hard coded since I don't know how to do it
loadSelectElement('select03', [
['select03_val10', 'val10'],
['select03_val21', 'val21'],
]);
} // select02
}
//-->
</script>
</head>
<body>
<form name="myForm">
<select name="select01" id="select01" onchange="madeSelection(this);">
<option value="--">Select the name (read from db => No pb)</option>
<%
// SUppose there are 3 possibles values which are read from the database
// String[] str=readValue();
// str contains the values that will be shown in the 1st select list
// str.length contains the number of elements
int i=2;
String[] str={"1st value","2nd value"};
for (int j=0;j<i;j++)
{
%>
<option value="<%=str[j]%>"><%=str[j]%></option>
<%
}
%>
</select>
<div id="select02Container" style="margin-top:1em; display:none;">
<select name="select02" id="select02" onchange="madeSelection(this);">
<option value="--">Select the 2nd value</option>
</select>
</div>
<div id="select03Container" style="margin-top:1em; display:none;">
<select name="select03" id="select03" onchange="madeSelection(this);">
<option value="--">Select the 3rd value</option>
</select>
</div>
</form>
</body>
</html>
DYNAMIC SELECT LIST BUILT FROM DATABASE
Linear Mode
