This javascript is messing up, and I don't know why...

[bigsilk]

All,

I don't know much about Javascript, but can read along (kind of like I can Spanish: I get the gist, but not the grammar...) I was given this project after two others had worked on it. I'm a designer, not a developer, and most of my Javascript experience has come in the form of plug-and-play scripts, certainly not debugging.

The problem comes when choosing from first (choose: Color) of two dropdowns, a second set appears. Then, when choosing a second (choose:Blue) option from the first set of dropdowns, two returns come up when only one should.

Here's the page:

http://www.frartexchange.com/depend.htm (http://www.frartexchange.com/depend.html)l

Here's the code:


function makeSublist(parent,child,isSubselectOptional,childVal)
{
$("body").append("<select style='display:none' id='"+parent+child+"'></select>");
$('#'+parent+child).html($("#"+child+" option"));

var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected');

$('#'+parent).change(
function()
{
var parentValue = $('#'+parent).attr('value');
$('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
if(isSubselectOptional) $('#'+child).prepend("<option value='none'> -- Select -- </option>");
$('#'+child).trigger("change");
$('#'+child).focus();
}
);
}

$(document).ready(function()
{
makeSublist('child','grandsun', true, '');
makeSublist('parent','child', false, '1');
});

Any help is appreciated.

Adam