JAVAscript is fun... Almost!

**NotionCommotion** · 12-13-2005 01:10 AM

I am so close, but am banging my head to get it right. I wish to add and remove rows to a column as defined by two connected dropdown menus. The code almost works perfectly, but when I remove a row, my second dropdown doesn't display correct. Any thoughts? Also, even more important, any (hopfully constructive) critisim about my code. I am new, and am sure it is not the prettiest in the world.

Thank you in advance, and thank you to those who have gotten me as far as I am!

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menus</title>
<script language="JavaScript">

var dropdown = new Array()

dropdown[0] = new Array()
dropdown[0][0] = "Type 0"
dropdown[0][1] = "Type 0 Subset a"
dropdown[0][2] = "Type 0 Subset b"
dropdown[0][3] = "Type 0 Subset c"
dropdown[0][4] = "Type 0 Subset d"

dropdown[1] = new Array()
dropdown[1][0] = "Type 1"
dropdown[1][1] = "Type 1 Subset a"
dropdown[1][2] = "Type 1 Subset b"
dropdown[1][3] = "Type 1 Subset c"
dropdown[1][4] = "Type 1 Subset d"

dropdown[2] = new Array()
dropdown[2][0] = "Type 2"
dropdown[2][1] = "Type 2 Subset a"
dropdown[2][2] = "Type 2 Subset b"
dropdown[2][3] = "Type 2 Subset c"
dropdown[2][4] = "Type 2 Subset d"

function initiallize_page() {
update_menu1();
update_menu2();
}

function update_menu1() {
var elem;
for(var i=0;i<dropdown.length;i++) {
elem = document.createElement('option');
elem.text = dropdown[i][0];
elem.value = dropdown[i][0];
document.getElementById('box1').options.add(elem);
}
}

function update_menu2() {
var elem;
for(i=1;i<(dropdown[0].length);i++) {
elem = document.createElement('option')
elem.text = dropdown[0][i]
elem.value = dropdown[0][i]
document.getElementById('box2').options.add(elem);
}
}

function change_dd(obj,indx)
{
for(var i=obj.options.length;i>=0;i--) {
obj.options.remove(0);
}
var elem;
for(i=1;i<(dropdown[indx].length);i++) {
elem = document.createElement('option')
elem.text = dropdown[indx][i]
elem.value = dropdown[indx][i]
obj.options.add(elem);
}
}

function add_item(obj1,obj2)
{
index=obj2.selectedIndex;
if (!obj2.set){
obj2.set=new Array();
for (abc=0;abc<obj2.options.length;abc++){
obj2.set[abc]=obj2.options[abc].text;
obj2.ary=new Array();
}
}
obj2.ary[index]=document.getElementById('TRClone').cloneNode(true);
document.getElementById('TBdy1').appendChild(obj2.ary[index]);
obj2.ary[index].sel=obj2;
obj2.ary[index].getElementsByTagName('TD')[0].firstChild.data=obj1.value;
obj2.ary[index].getElementsByTagName('TD')[1].firstChild.data=obj2.value;
}

function remove_item(obj){
obj=obj.parentNode.parentNode;
for (abc=0;abc<obj.sel.length;abc++){
if (obj.sel.set[abc].match(obj.getElementsByTagName('TD')[0].firstChild.data)){
obj.sel.options[abc].text=obj.sel.set[abc];
}
}
// obj.sel.selectedIndex=0;
document.getElementById('TBdy1').removeChild(obj);
}

</script>
</head>

<body onload="initiallize_page()">

<select id="box1" onchange="change_dd(document.getElementById('box2'),this.selectedIndex)"></select>
<select id="box2" ;></select>
<input type="button" name value="Add" onclick="add_item(document.getElementById('box1'),document.getElementById('box2'));">
<table border="0">
<tbody id="TBdy1">
</table>
<div style="position:absolute;visibility:hidden;">
<table>
<tr id="TRClone">
<td width="200"> </td>
<td width="200"> </td>
<td width="100"><input size="4"></td>
<td width="100">
<input type="button" name value="Remove" onclick="remove_item(this);"></td>
</tr>
</table>
</div>

</body>

</html>
</script>

</html>
</head>

**CrazyMerlin** · 12-13-2005 02:46 AM

okay, just gonna take a quick look

btw...you close tags at the end too many times

can you explain what the functions are supposed to do?

**NotionCommotion** · 12-13-2005 10:11 AM

Thank you for looking at it.

In regards to function, one select option is used to limit choices, and a second select option is used to pinpoint the choice. The user can then "add" as many selected option as desired, and once "added", they can input a quanity or delete it. My next step which I haven't even started is to use php server side to act on the inputs.

Thanks again!

**CrazyMerlin** · 12-15-2005 04:15 PM

I haven't forgotten about this, just busy.

Using php and javascript together is the best you can get. That is what I use all the time.

I rarely write .htm pages anymore, they are pretty much all .php pages.

Thread: JAVAscript is fun... Almost!

Thread Tools

Display

JAVAscript is fun... Almost!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions