<!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. javascrip学习之基础

    弹窗信息:三种消息框:警告框.确认框.提示框. window.alert("sometext"); var r=confirm("按下按钮");//提示信息,返 ...

  2. [转]win系统下nodejs安装及环境配置

    本文转自:http://www.cnblogs.com/linjiqin/p/3765390.html 第一步:下载安装文件 下载nodejs,官网:http://nodejs.org/downloa ...

  3. 标准I/O库（详解）（Standard I/O Library）

    文章转自:https://www.cnblogs.com/kingcat/archive/2012/05/09/2491847.html 自己在学习中,对此原文的基础之上进行补充. 什么是缓冲区 缓冲 ...

  4. pat1031. Hello World for U (20)

    1031. Hello World for U (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Giv ...

  5. 【转载】CSS3 常用四个动画（旋转、放大、旋转放大、移动）

    http://blog.csdn.net/fungleo/article/details/49848905

  6. C#入门--索引器

    C#入门--索引器 索引器允许类或结构的实例按照与数组相同的方式进行索引.索引器类似于属性,不同之处在于它们的访问器采用参数. 索引器概述 索引器使得对象可按照与数组相似的方法进行索引. get 访问 ...

  7. Java类的初始化顺序 （静态变量、静态初始化块、变量、初始...

    很有意思的一篇文章 1.没有继承 静态变量->静态初始化块->变量->变量初始化块->构造方法 2.有继承的情况 父类静态变量->父类静态初始化块->子类静态变量- ...

  8. 设计模式之工厂模式详细读后感TT!(五)

    一如既往:原文 工厂方法(factory method)模式的意义是定义一个创建产品对象的工厂接口, 将实际创建工作推迟到子类当中. 核心工厂的创建, 这样核心类成为一个抽象工厂角色, 仅仅复制工厂子 ...

  9. MongoDB之mongodb.cnf配置

    # mongodb3.2.1 的主配置文件,将此文件放置于 mongodb3.2.1/bin 目录下 # hapday 2016-01-27-16:55 start # 数据文件存放目录 dbpath ...

  10. 超详细Hexo+Github博客搭建小白教程

    原文链接:超详细Hexo+Github博客搭建小白教程 去年9月的时候开始搭建了第一个自己的独立博客,到现在也稍微像模像样了.很多小伙伴应该也想过搭建一个自己的博客,网上也有一堆详细教程.我在此稍稍总 ...