js css 美化select代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>js css 美化select代码 by http://www.111cn.net</title>
<script type="text/网页特效" src="mselect.js"></script>
<script type="text/javascript">
/*
首先，本js支持滑动展开，原下拉的onchange事件，selected/disabled属性，
支持上下键选择，支持表单的reset，应该说该有的都有了吧？然后，作者是angusyoung，2010-4-10
*/
var myselect=new mselect('myselect','mselect.css');
window.onload=function(){
var as=document.getelementsbytagname('select');
for (var i=0;i<as.length;i++){
switch(as[i].getattribute('msty')){
case 'redline':
myselect.create(as[i],'redline');
break;
case 'bluecircle':
myselect.create(as[i],'bluecircle',true);
break;
case 'orangeheart':
myselect.create(as[i],'orangeheart',true);
break;
}
}
}
</script>
</head><body style="text-align:center;background-color:#cfdfef">
<h2>来玩正式的咯，提交表单吧！</h2>
<form name="goodjob" action="" method="get" onreset="alert('haha, do it.');">
<p>填写你的姓名：<input name="testname" type="text" /></p>
<p>选择你的性别：
<select name="sexy" msty="orangeheart">
<option>保密</option>
<option value="0">女</option>
<option value="1">男</option>
</select>
</p>
<p>选择你的地址：
<select name="addr" msty="bluecircle" onchange="alert('你选择的地址是'+this.options[this.selectedindex].text+'对吧？');">
<option>火星</option>
<option value="gz">广州</option>
<option value="sz" selected="selected">深圳</option>
<option value="st">汕头</option>
<option value="" disabled="disabled">不可选</option>
<option value="dg">东莞</option>
<option value="zh">珠海</option>
</select>
</p>
<p>选择你的年龄：
<select name="age" msty="redline">
<option value="18-25">18-25</option>
<option value="25-30" selected="selected">25-30</option>
<option value="30-40">30-40</option>
</select>
</p>
<p><button type="submit"> 提 交 </button><button type="reset"> 重 置 </button></p>
</form>
<p>下面是表单外的，不受reset影响。</p>
<select name="www" msty="bluecircle">
<option>保密</option>
<option value="0">女</option>
<option value="1">男</option>
</select>
</body>
</html>
