<!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>
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
