<!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:;padding:;}

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:}

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选中显示不同表单内容

js控制select选中显示不同表单内容的更多相关文章

  1. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  2. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  4. js控制radio选中

    经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("ch ...

  5. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  6. c#使用itextsharp输出pdf(动态填充表单内容,显示中文)

    相关链接: iText的简单应用-字体 c#程序为PDF文件填写表单内容 示例代码: static void Main(string[] args) { BaseFont font = BaseFon ...

  7. 分页功能实现之通过ajax实现表单内容刷新

    拿代码来说话 我们的需求就是点击翻页功能,实现表格内容局部刷新且能够翻到对应的页面上,不明白? 那么就看看下面的图,需要达到的效果如下所示: 现在要实现的功能就是把红线框起来的表单内容 在点击翻页的时 ...

  8. c#程序为PDF文件填写表单内容

    众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...

  9. Django--post提交表单内容

    本节目标:①.提交表单内容②.通过客户端提交表单新增一篇文章③.通过Django的forms组件来完成新增一篇文章 =======提交表单内容======== 1.前端html:login.html ...

随机推荐

  1. Java Jdk 环境配置和测试

    测试jdk:1.6 安装完jdk1.6以后,在我的电脑中找到环境变量配置 在系统变量的Path 中输入 ;E:\Program Files (x86)\Java\jdk1.6.0_01\bin(路径根 ...

  2. 分类模型输出y值

    y=w0+w1x1+w2x2+....+wnxn coef_:存储w1,w2,...wn. intercept_:存储w0 dual_coef_*support_vectors_=coef_ (1)S ...

  3. android Firebase中配置 Crashlytics

    首先登陆Google账号 https://firebase.google.com/ 创建项目 配置Android 1.注册应用 2.下载配置文件 3.添加firebaseSDk 配置后台分析的Cras ...

  4. c语言字符函数

    函数名: stpcpy 功  能: 拷贝一个字符串到另一个 用  法: char *stpcpy(char *destin, char *source); 程序例: #include <stdi ...

  5. 【LDAP】LDAP介绍

    原文:http://ldapman.org/articles/intro_to_ldap.html原文作者:Michael Donnelly 什么是LDAP? LDAP的英文全称是Lightweigh ...

  6. jquery validation yyyy-MM-dd格式日期在ie中无法验证通过

    自己开发的公众号,可以领取淘宝内部优惠券 问题 首先在ie6.7.8下面打开这个页面http://jqueryvalidation.org/date-method/,输入的日期格式为:yyyy-MM- ...

  7. 2.C#中的常用快捷键

    快速对齐代码: Ctrl+K+D:  快速对齐代码   (如果代码语法错误,就不能使用) Ctrl+Z:  撤销 Ctrl+S:保存   没事就Ctrl+S一下,防止因为电脑断电,代码全部丢失 Ctr ...

  8. .NET 后台动态添加GridView列

    BoundField bfColumn1 = new BoundField(); bfColumn1.DataField = "zbcompanyname"; bfColumn1. ...

  9. Android - 常见的控件布局，左中右，左右等

    这里汇总的是自己在工作过程中,使用过的常见空间布局,记录在这里.详情如下: 1. 三个控件,分别处于左,中,右 要点:使用RelativeLayout <RelativeLayout andro ...

  10. tomcat启动部署APP报错：This is very likely to create a memory leak

    This is very likely to create a memory leak的错误,网上很多,原因也是各种各样,这里也仅提供一个解决的思路. 问题描述:启动tomcat时,不能访问部署的AP ...