Prøv denne her. NOTE: jeg har smidt en onchange="alert(this.value)" ind så man kan se hvad værdien er når man klikker på select box nr 2. Den skal du selvfølgeligt bar fjerne igen.
<html>
<head>
<script language="Javascript">
var arrayData = new Array();
arrayData[0] = 'SALES|[SAL] User 01|1'
arrayData[1] = 'SALES|[SAL] User 02|2'
arrayData[2] = 'SALES|[SAL] User 03|3'
arrayData[3] = 'MARKETING|[MAR] User 01|4'
arrayData[4] = 'MARKETING|[MAR] User 02|5'
arrayData[5] = 'MARKETING|[MAR] User 03|6'
arrayData[6] = 'TECHNOLOGY|[TEC] User 01|7'
arrayData[7] = 'TECHNOLOGY|[TEC] User 02|8'
arrayData[8] = 'TECHNOLOGY|[TEC] User 03|9'
function populateData( name ) {
select = window.document.form.SubCategory;
string = "";
// 0 - will display the new options only
// 1 - will display the first existing option plus the new options
count = 0;
// Clear the old list (above element 0)
select.options.length = count;
// Place all matching categories into Options.
for( i = 0; i < arrayData.length; i++ ) {
string = arrayData[i].split( "|" );
if( string[0] == name ) {
select.options[count++] = new Option( string[1], string[2] );
}
}
// Set which option from subcategory is to be selected
// select.options.selectedIndex = 2;
// Give subcategory focus and select it
// select.focus();
}
</script>
</head>
<body>
<table cellpadding=4 cellspacing=0 border=0>
<tr>
<form name=form method=post action="">
<td><span class=DefMenuText>Departments</span><br>
<select name='category' size=3 style="width:120;"
onChange='java script:populateData( this.options[selectedIndex].text )'>
<option>SALES</option>
<option>MARKETING</option>
<option>TECHNOLOGY</option>
</select>
</td>
<td><span class=DefMenuText>Department Users</span><br>
<select name="SubCategory" size=3 style="width:120;" onchange="alert(this.value);">
</select>
</td>
</form>
</tr>
</table>
</body>
</html>
