js css教程 美化select代碼，是利用了css div 來模仿 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.jzread.com</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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
