<!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. 为什么 c++中函数模板和类模板的 声明与定义需要放到一起？

    将模板的声明与定义写在一起实在很不优雅.尝试用“传统”方法,及在.h文件里声明,在.cpp文件里定义, 然后在main函数里包含.h头文件,这样会报链接错误.why!!!!!!!!!!!!! 这是因为 ...

  2. JavaSE---接口

    1.概述 1.1 接口只能继承接口(不能继承类): 1.2 一个接口可以继承多个接口: 1.3 接口中不能包含构造器.初始化块,可以有 属性(只能是常量).方法(只能是抽象方法).内部类(内部接口). ...

  3. SourceTree 关于 .gitignore使用/下载

    # =============== # # Unity generated # # =============== # Temp/ Obj/ UnityGenerated/ Library/ Asse ...

  4. Jenkins+Ant+Jmeter接口自动化集成测试

    一.Jmeter+ant 1.首先我们默认Jmeter脚本已经录制好了,并测试通过,存在(查询模块.jmx)脚本 2.将JMeter所在目录下extras子目录里的ant-JMeter-1.1.1.j ...

  5. C++有关拷贝构造函数（默认/浅/深拷贝构造函数）

    拷贝结构函数顾名思义就是复制对象. 先讲一下默认拷贝函数: 默认拷贝就是直接赋值,让程序调用默认拷贝结构函数. Student p1; Student p2 = p1//或者Student p2(p1 ...

  6. python方法

    跨模块级(跨文件)的[全局变量的方法] ``` # -*- coding: utf-8 -*- # /modvar.py def _init(): global _module_dict _modul ...

  7. MySQL设置允许用户远程登录

    . //登录数据库 mysql -u root -pvmwaremysql>use mysql; //%为所有ip都可以远程访问 mysql>update user set host = ...

  8. Unity 滚轮实现UGUI ScrollView的缩放

    本文原创,转载请注明出处http://www.cnblogs.com/AdvancePikachu/p/7908754.html 前段时间在做一个类似AnimationCurve的可视化编辑器,其中在 ...

  9. 排序 & 常用算法

    一.快速排序QuickSort 快速排序和归并排序都使用分治法来设计算法,区别在于归并排序把数组分为两个基本等长的子数组,分别排好序之后还要进行归并(Merge)操作,而快速排序拆分子数组的时候显得更 ...

  10. Annotation(注解)的概念、作用及常用注解

    Annotation的概念: 能够添加到 Java 源代码的语法元数据.类.方法.变量.参数.包都可以被注解,可用来将信息元数据与程序元素进行关联.Annotation 中文常译为“注解”. 从JDK ...