<!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. OS---文件结构

    1.概述 1.1 对于任何一个文件,都存在以下2种形式结构: 文件的逻辑结构: 从用户的角度出发所观察到的文件组织形式,独立于文件的物理特性: 文件的物理结构(文件存储结构): 文件在外存上的存储组织 ...

  2. java编程--04比较几个常用的日期时间相关类的区别

    第一篇,介绍日期的比较 第二篇,介绍日期的格式化 第三篇,介绍关于日期常用的计算 第四篇,比较几个常用的日期时间相关类的区别 第五篇,jdk9对日期类进行了更新,写一些i自己的学习心得. 下面以一组思 ...

  3. 转:Android中的Handler的机制与用法详解

    注:Message类的用法: message的几个参数都可以携带数据,其中arg1与arg2可以携带int类型,what是用户自定义的int型,这样接受者可以了解这个消息的信息. 说明:使用Messa ...

  4. OpenStack Weekly Rank 2015.07.27

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 7 1 1 7 10 Sw ...

  5. (转)Linux命令之md5sum

    Linux命令之md5sum  原文:https://www.cnblogs.com/zhuxiaohou110908/p/5786893.html 1. 背景 在网络传输.设备之间转存.复制大文件等 ...

  6. pat1038. Recover the Smallest Number (30)

    1038. Recover the Smallest Number (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  7. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  8. 了解委托（Delegate）

    委托是一种全新面向对象语言特性,运行在.Net平台 基于委托,开发事件驱动程序变得非常简单 使用委托可以大大简化多线程变成的难度 理解委托 int a:   //定义变量 a=100://给变量赋值 ...

  9. 延迟查询--LINQ

    1.LINQ查询使用的是延迟查询的方法,以便提高效率 public static IEnumerable<TSource> Where<TSource>(this IEnume ...

  10. hystrix应用介绍（四）

    前几章已经讲了hystrix的应用场景,以及如何使用,本章我们针对如何进行hystrix参数配置做一些分析 //异步的执行 @HystrixCommand(groupKey = "testK ...