Help changing class via id & javascript

[myyoungfamily]

I'm having a little trouble getting this right. I'm trying to change the class of an html element with a selection in drop down box.
The first snippet of code is what I got working in Firefox, but it won't work in IE and others. IE and others won't work with onClick in an <option> tag.
The second snippet is what I've tried to put together but can't get it right. Any help would be appreciated...

1st

<script>
function change(id, newClass) {
identity=document.getElementById(id);
identity.className=newClass;
}
</script>

<table class="items" border="0" cellpadding="0" cellspacing="0" width="100%" id="changeme">
<tr>
<td>
Additional Items<select>
<option onClick="change('changeme', 'items');">1</option>
<option onClick="change('changeme', 'items2');">2</option>
<option onClick="change('changeme', 'items3');">3</option>
<option onClick="change('changeme', 'items4');">4</option>
<option onClick="change('changeme', 'items5');">5</option>
<option onClick="change('changeme', 'items6');">6</option>
<option onClick="change('changeme', 'items7');">7</option>
<option onClick="change('changeme', 'items8');">8</option>
<option onClick="change('changeme', 'items9');">9</option>
<option onClick="change('changeme', 'items10');">10</option>
</select>
</td>


2nd

<script>
var options = new Array();
options['items'] = 'items';
options['items2'] = 'items2';
options['items3'] = 'items3';
options['items4'] = 'items4';
options['items5'] = 'items5';
options['items6'] = 'items6';
options['items7'] = 'items7';
options['items8'] = 'items8';
options['items9'] = 'items9';
options['items10'] = 'items10';

function change(id, newClass)
{
if(obj.selectedIndex==0)return;
document.getElementById('changeme').className = options[obj.options[obj.selectedIndex].value];
identity.className=newClass;
}

</script>

<table class="items" border="0" cellpadding="0" cellspacing="0" width="100%" id="changeme">
<tr>
<td>
Additional Items<select onChange="change(this.newClass);">
<option value"items">1</option>
<option value"items2">2</option>
<option value"items3">3</option>
<option value"items4">4</option>
<option value"items5">5</option>
<option value"items6">6</option>
<option value"items7">7</option>
<option value"items8">8</option>
<option value"items9">9</option>
<option value"items10">10</option>
</select>
</td>

[mburt]

Try this:


<script>
var options = new Array();
options[0] = 'items';
options[1] = 'items2';
options[2] = 'items3';
options[3] = 'items4';
options[4] = 'items5';
options[5] = 'items6';
options[6] = 'items7';
options[7] = 'items8';
options[8] = 'items9';
options[9] = 'items10';

function change(id)
{
if(id.selectedIndex==0)return;
document.getElementById('changeme').className = options[id.selectedIndex]
alert("Classname="+document.getElementById('changeme').className)
}

</script>

<table class="items" border="0" cellpadding="0" cellspacing="0" width="100%" id="changeme">
<tr>
<td>
Additional Items<select onChange="change(this);">
<option value="items">1</option>
<option value="items2">2</option>
<option value="items3">3</option>
<option value="items4">4</option>
<option value="items5">5</option>
<option value="items6">6</option>
<option value="items7">7</option>
<option value="items8">8</option>
<option value="items9">9</option>
<option value="items10">10</option>
</select>
</td>
</tr>
</table>

[myyoungfamily]

Thanks, I'll give it a try when I get back to my dreamweaver computer. Check back later...

[mburt]

You could copy it into NotePad (if you're running windows) and save it as .htm, or .html. Then view it in a browser.

[myyoungfamily]

It works, but I want to see if one thing can be changed:

When I select an option, I get a popup that tells me "Classname=items#"

I don't need the popup...

[myyoungfamily]

Got it! Just removed this line:

alert("Classname="+document.getElementById('changeme').className)

[myyoungfamily]

Thanks...