JavaScript Forum

**sat** · 08-07-2006, 05:08 PM

Hi,
i have three js arrays. I pass the values of the first array in a drop down list.
After the user chooses an option i want to display in a columnar table the elements of the other two arrays based on their index number.
Although i have managed to associate the index numbers of the arrays i cannot figure how to display the desired records in a table. I hope the explanation is clear.
Here is part of the script:

<script language="javascript">
function showRecords(){
var x = document.form1.choose_option.value;
for(i=0; i<arrId.length; i++){
if(arrId[i] == x){
break;
}
}
}
}
</script>

//i have used: alert("ID: " + x + "Information: " + arrInfo[i] + //"Availability: " //+ arrAvail[i]); to check if it gets the records and it works fine

<form name="form1">
<select name="choose_option" size="1" onChange="return showRecords()">
document.writeln(<option selected>Please choose</option>);
<script type="text/javascript">
for(var i=0; i<arrId.length; i++){
document.writeln("<option>" + arrId[i] + "</option>");
}
</script></select>
</form>

Any help would be very much appreciated. Thanks.

**funkdaddu** · 05:32 PM

You could do something like:

Code:

...
if(arrId[i] == x){
document.getElementById("itemInfo").innerHTML = arrInfo[i];
document.getElementById("itemAvail").innerHTML = arrAvail[i];
break;
}...

and in your body somewhere:

Code:

<p id="itemInfo"></p>
<p id="itemAvail"></p>

or have that put wherever you want - in a DIV, SPAN, TD, etc...
Oh and I think you have 1 too many "{" in your showRecords function.

**funkdaddu** · 08-07-2006, 06:04 PM

Oh, and instead of doing all the "document.write" stuff using strings and such you can just append a option object to a select box:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
window.onload = function() {
	myNewSelect = document.createElement("select");
	myNewOption = new Option('test','asd');
	
	myNewSelect.appendChild(myNewOption);
	document.FormName.appendChild(myNewSelect);

}
//-->
</script>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="" method="get" name="FormName">
		</form>
		<p></p>
	</body>

</html>

Makes life easier than having to deal with all those strings.

**sat** · 08-07-2006, 06:26 PM

Thank you for the reply. I followed your suggestion and it wokrs fine.
I have also been trying to make it work in a different way.
Something like that:

<div id="results">
</div>

<script language="javascript">
function showRecords(){
div = document.getElementById('results');
div.innerHTML = '';

table = document.createElement('table');
div.appendChild(table);

tableBody = document.createElement('tbody');
table.appendChild(tableBody);

var x = document.form1.choose_option.value;
for(i=0; i<arrId.length; i++){
if(arrId[i] == x){
break;
}
row = arrInfo[i];
tableRow = document.createElement('tr');
tableBody.appendChild(tableRow);
}
}
</script>

But no success.
Do you think that it would be possible to display the records following the above approach?
I really appreciate your help.

**funkdaddu** · 07:55 PM

In your code, when you are append the table to the DIV the table has nothing in it. You should:

- append data to cell
- append cells to a row
- append rows to table
- append table to DIV

When you append something it's like it's being written to the page. Dig?