Forum Moderators: open
<html>
<head>
<style>
#chosen{height:300px; width:600px; background-color:#CCCCCC}
.class1{background-color:#000000; color:#fff}
</style>
<script language="javascript">
<!--
function changeClass(chosen)
{
theBox = document.getElementById(chosen);
if (chosen == " ") {
theBox.className = "class1";
}
if (chosen == "1") {
alert("you chose1");
}
if (chosen == "2") {
alert("22222222!");
}
if (chosen == "3") {
alert("33333!");
}
}
-->
</script>
</head>
<body>
<div align="center">
<form name="myform">
<select name="optone" size="1"
onchange="changeClass(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
</form>
<div id="chosen">
This needs to change class
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
#myform {
text-align:center;
}
#chosen{
height:300px;
line-height:300px;
width:600px;
margin:auto;
text-align:center;
}
.class0 {
background-color:#ccc;
color:#000;
}
.class1 {
background-color:#000;
font-size:1em;
color:#fff;
}
.class2 {
background-color:#f00;
font-size:1.5em;
color:#00f;
}
.class3 {
background-color:#00f;
font-size:2em;
color:#f00;
}
</style>
<script type="text/javascript"> /* Note that language="javascript" is now deprecated */
function changeClass(){
document.getElementById('myform').reset();
theBox=document.getElementById('chosen'); /* Note that in your code the quotes were omitted */
document.getElementById('optone').onchange=function() {
theBox.className='class'+this.value;
theBox.firstChild.nodeValue='This is class'+this.value;
}
}
window.addEventListener?
window.addEventListener('load',changeClass,false):
window.attachEvent('onload',changeClass);
</script>
</head>
<body>
<form id="myform" action="#">
<div>
<select id="optone" size="1">
<option value="0" selected="selected">-- options --</option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
</div>
</form>
<div id="chosen" class="class0">This is class0</div>
</body>
</html>
