js控制select选中显示不同表单内容

浏览数：31 / 时间：2015年06月09日 
<!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选中显示不同表单内容

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style log http java si html it 问题 class style log http java si html it 问题

相关文章

随机文章

您可能还喜欢

您可能还喜欢