Javascript error on drop down boxes

[frankcpl]

I am having an issue with this code. Code someone please offer some assistance.

<script type='text/javascript'>
var lists = new Array();

lists['Academic'] = new Array();
lists['Academic'][0] = new Array(
'00205 Accountancy',
'00724 General Science',
'0127 Pre-Health Information Management'
);
lists['Academic'][1] = new Array(
'00205 Accountancy',
'00724 General Science',
'0127 Pre-Health Information Management'
);

// Second set of text and values
lists['Business'] = new Array();
lists['Business'][0] = new Array(
'06005 Accounting Technology',
'06022 Ag Bus & Mgmt Tech/Animal Husb',
'06010 Agricultural Technology',
'08011 Automotive Electronics Technology',
'08014 Automotive Technology'
);
lists['Business'][1] = new Array(
'06005 Accounting Technology',
'06022 Ag Bus & Mgmt Tech/Animal Husb',
'06010 Agricultural Technology',
'08011 Automotive Electronics Technology',
'08014 Automotive Technology'
);

lists['Career'] = new Array();
lists['Career'][0] = new Array(
'08014 Automotive Technology',
'06031 Civil Technology',
'08005 Collision Repair Technology',
'08075 Commercial Truck Driving'
);
lists['Career'][1] = new Array(
'08014 Automotive Technology',
'06031 Civil Technology',
'08005 Collision Repair Technology',
'08075 Commercial Truck Driving'
);

function emptyList( box ) {
while ( box.options.length ) box.options[0] = null;
}

function fillList( box, degree ) {

for ( i = 0; i < degree[0].length; i++ ) {

option = new Option( degree[0], degree[1] );

box.options[box.length] = option;
}

// Preselect option 0

box.selectedIndex=0;
}

function changeList( box ) {
list = lists[box.options[box.selectedIndex].value];
emptyList( box.form.degreeOpt );
fillList( box.form.degreeOpt, list );
}
</script>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Select Degree Type</label>
<select class="cf_inputbox" id="select_55" size="1" title="" name="typeDegree" onchange="changeList(this)">
<option value="Select One">Select One
<option value="Academic">Acedemic Degree
<option value="Business">Business Degree
<option value="Career">Career Certificate

</select>
</div>
</div>

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Select Type of Major</label>
<select class="cf_inputbox" id="select_66" size="1" title="" name="degreeOpt">
<option>
</select>
</div>
</div>

I keep getting an options.length error. I can not see where for the life of me.

 

[tsuji]

The whole div-select part should be wrapped within a form tag.
[tt]
[red]<form>[/red]
<div class="form_item">
<!-- etc etc -->
</div>
<div class="form_item">
<!-- etc etc -->
</div>
[red]</form>[/red]
[/tt]

 

[frankcpl]

This is a section of a form. I have the rest of the form working. This portion here is the part I am have issues with. If needed I can past in the whole form code, just didn't want to have a huge file for someone to look at.

Thanks for the quick reply.

 

[tsuji]

Then you look elsewhere, such as id collision, name collision/duplication, variable scope, typos etc... on the page.