<!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=utf-8" /> <title>js select選中顯示不同表單內容 </title> <link type="text/css" rel="stylesheet" href="css/text.css"> </head> <script type="text/javascript"> function test(Names){ var Name; for (var i=1;i<4;i++){ // 更改數字4可以改變選擇的內容數量，在下拉總數值的基礎上+1.比如：下拉菜單有5個值，則4變成6 var tempname="mune_x"+i var NewsHot="x"+i // “X”是ID名稱，比如：ID命名為“case1”，這里的“X”即為“case” if (Names==tempname){ Nnews=document.getElementById(NewsHot) Nnews.style.display=''; }else{ Nnews=document.getElementById(NewsHot) Nnews.style.display='none'; } } } </script> <body> <fieldset class="cont"> <div class="list"> <label><s>*</s>驗證方式：</label> <select size="1" name="D1" onChange="javascript:test('mune_x'+this.value)"> <option value="1">密保手機</option> <option value="2">密保郵箱</option> <option value="3">密保問題</option> </select> </div> <!-------------------------------選擇密保手機--------------------------------------> <div class="list" id="x1"> <label><s>*</s>密保手機：</label> <input type="text" value="" name="phone" placeholder="請輸入密保手機"> </div> <!-------------------------------選擇密保郵箱--------------------------------------> <div class="list" id="x2" style="display:none"> <label><s>*</s>密保郵箱：</label> <input type="email" value="" name="email" placeholder="請輸入密保郵箱"> </div> <!-------------------------------選擇密保問題--------------------------------------> <div class="fl" id="x3" style="display:none"> <div class="list"> <div class="ask"> <label><s>*</s>問題一：</label> <select name="question1"> <option selected="selected" value="0">請選擇密保問題</option> <option value="1">您母親的姓名是？</option> <option value="2">您母親的生日是？</option> <option value="3">您父親的姓名是?</option> <option value="4">您父親的生日是？</option> <option value="5">您配偶的姓名是？</option> <option value="6">您配偶的生日是？</option> <option value="7">您的學號（或工號）是？</option> <option value="8">您高中班主任的名字是？</option> <option value="9">您小學班主任的名字是？</option> <option value="10">您初中班主任的名字是？</option> <option value="11">您最熟悉的童年好友名字是？</option> <option value="12">您家在哪？</option> <option value="13">對您影響最大的人名字是？</option> </select> </div> <div class="answer"> <label><s>*</s>答案：</label> <input type="text" value=""> </div> </div> <div class="list"> <div class="ask"> <label><s>*</s>問題二：</label> <select name="question2"> <option selected="selected" value="0">請選擇密保問題</option> <option value="2">您母親的生日是？</option> <option value="3">您父親的姓名是?</option> <option value="4">您父親的生日是？</option> <option value="5">您配偶的姓名是？</option> <option value="6">您配偶的生日是？</option> <option value="7">您的學號（或工號）是？</option> <option value="8">您高中班主任的名字是？</option> <option value="9">您小學班主任的名字是？</option> <option value="10">您初中班主任的名字是？</option> <option value="11">您最熟悉的童年好友名字是？</option> <option value="12">您家在哪？</option> <option value="13">對您影響最大的人名字是？</option> </select> </div> <div class="answer"> <label><s>*</s>答案：</label> <input type="text" value=""> </div> </div> <div class="list"> <div class="ask"> <label><s>*</s>問題三：</label> <select name="question3"> <option selected="selected" value="0">請選擇密保問題</option> <option value="1">您母親的姓名是？</option> <option value="2">您母親的生日是？</option> <option value="3">您父親的姓名是?</option> <option value="4">您父親的生日是？</option> <option value="5">您配偶的姓名是？</option> <option value="6">您配偶的生日是？</option> <option value="7">您的學號（或工號）是？</option> <option value="8">您高中班主任的名字是？</option> <option value="9">您小學班主任的名字是？</option> <option value="10">您初中班主任的名字是？</option> <option value="11">您最熟悉的童年好友名字是？</option> <option value="12">您家在哪？</option> <option value="13">對您影響最大的人名字是？</option> </select> </div> <div class="answer"> <label><s>*</s>答案：</label> <input type="text" value=""> </div> </div> </div> </fieldset> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
css:
@charset "utf-8"; /* CSS Document */ body,div,fieldset,input{margin:0;padding:0;} s{font-style:normal;font-weight:normal;text-decoration:none;color:red;padding-right: 5px;} body{ font:12px/1.5 tahoma,arial,Microsoft YaHei,SimSun; background:#badff2; color:#666;_width:100%;_height:100%;} input,select{font:12px/1.5 'microsoft yahei', simsun,arial; border:1px solid #ccc} input[type="text"],input[type="email"],select{padding:5px;margin:0} input{width:250px;} select{width:200px} fieldset {border:0 none;} label{float:left;width:100px;text-align:right;line-height:30px} .list{margin-bottom: 20px;float: left;width:80%;padding-left:100px} .cont{width:940px;margin:0 auto;background:#fff;padding:30px;margin-top:50px} .fl{float:left} .ask,.answer{padding-bottom:10px;width: 100%;float: left;}
js控制select選中顯示不同表單內容