Combo selection and build table

Display table contents depending on selection

[Alternative Future]

Greetings

I would like to have a combo box selection on my page, when the customer selects from the drop down box I would like my table to display the items related to that selection. Here is what I have so far which is the only thing I have managed to find online.

<form>
<select name="displayevents" id="displayevents" onChange="showRelatedItems(this[this.selectedIndex].value);">
<option value="">Select</option>
<option value="item1">Item1</option>
<option value="item2">Item2</option>
</select>

<table id=tbl>
<tr><td>Column A</td><td>Column B</td></tr>
</table>

function showRelatedItems(value) {
var r = document.createElement('tr');
var ca = document.createElement('td');
var cb = document.createElement('td');
var ta = document.createTextNode("test 1");
var tb = document.createTextNode("test 2");
var t = document.getElementById('tbl');

ca.appendChild(ta);
cb.appendChild(tb);

r.appendChild(ca);
r.appendChild(cb);

t.tBodies(0).appendChild(r);
}

Where I have var ta & tb with string test 1 & 2 these would come from an array list? and loop around each of the table rows and cells creating an element for each?

Item1 = "i1, i2, i3, i4"
Item2 = "i1, i2"

When the user selects "Select" from the drop down selection this would clear the table to display nothing. When they selected Item1 the table would display i1 in the first cell and a checkbox in the next with the same value i1, then it would loop around all items in the array list and create a table row for each. Same thing when selecting Item2 all items would be cleared from the first selection and a tabel row for each of the two items would be displayed.

Any help/pointers or examples would be appreciated.

With thanks in advance

George

[Alternative Future]

Anyone?

[Fotiman]

Maybe create a hash map for your "items":

var items = { 
  item1: ["i1", "i2", "i3", "i4"], 
  item2: ["i1", "i2"] 
};

Then in your showRelatedItems method:

var i, t, trs, oldtr, tr, td; 
if (items[value]) { 
  tr = document.createElement('tr'); 
  for (i = 0; i < items[value].length; i++) { 
    // Create a td for each  
    td = document.createElement('td'); 
    td.appendChild(document.createTextNode(items[value][i])); 
    tr.appendChild(td); 
  } 
  trs = t.tBodies(0).getElementByTagName('tr'); 
  oldtr = (trs.length > 0? trs[0]: null); 
  t.tBodies(0).replaceChild(tr, oldtr); 
} 
else { 
  // No entry for value found 
} 

I haven't tested that at all, but the logic is basically take the value selected in the dropdown and use that as a key in the hash map (items). If that item is found, then step through the array stored by that item and create a td for each item in the array and append all the td's to a tr. Then replace the first tr element child of the table with your new tr.

Likewise, if value was blank, then you could do something similar in the else case (delete the existing row, etc.).

Let me know if you need more help.

[Fotiman]

Also note that my example is missing some assignments, like assigning t to your table element. Like I said, i didn't test it, just wanted to get it out in concept.
:)

[Alternative Future]

Thanks Fotiman

Your help is appreciated :) I shall try it out at work tomorrow - I have a hash map with all the items - it was just the function logic that was getting to me - perhaps I was making it harder for myself... In the else I clean out the current display? Do I again just loop around the last list and clean out each element or is there a simpler way of doing this?

Thanks again

Gs

[Alternative Future]

Ok

I have it kind of working:

var items = {
icc:["icc1", "icc2", "icc3", "icc4"],
wcc:["cc1", "cc2"]
};
function addRow(value){
var tbl = document.getElementById('tbl')
removeTable(tbl)
if (items[value]) {
for (i = 0; i < items[value].length; i++) {
var tr = tbl.tBodies(0).insertRow(i)
for (x = 0; x < 2; x++) {
var td = tr.insertCell(x)
td.appendChild(document.createTextNode(items[value][i]))
}
}
tbl.appendChild(tbl)
} else {
removeTable(tbl)
}
}
function removeTable(tbl){
while(tbl.tBodies(0).childNodes[0]){
tbl.tBodies(0).removeChild(tbl.tBodies(0).childNodes[0])
}
}

But what I would like to do is add a radio button to the second table cell inside the for loop, and for the life of me I can't seem to get it to work - any help is appreciated :)

TIA

George

[Alternative Future]

Ok found a solution, perhaps not the best:
for (i = 0; i < items[value].length; i++) {
tr = tbl.tBodies(0).insertRow(i)
td = tr.insertCell(0)
element = document.createElement("<input type='checkbox' value='"+items[value][i]+"' onclick='alertValue(this)'/>");
td.appendChild(element)
td = tr.insertCell(1)
td.appendChild(document.createTextNode(items[value][i]))
}

-Gs