<!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. TestNG的testng.xml配置概述

    TestNG提供的annotaions用来辅助定义测试类. TestNG的testng.xml配置文件用来辅助定义执行什么样的测试,即testng.xml更像是一个测试规划. testng.xml配置 ...

  2. speex编译

    首先去官网 https://www.speex.org/downloads/ 下载解压 将include.libspeex文件夹复制到自己新建工程的jni目录下 speex有关的类 package c ...

  3. [转]jQuery AJAX pagination plugin with ASP.NET Server Side

    本文转自:http://do-web.com/jpaging/usage How does it work? 1. In order to implement the plugin, you need ...

  4. Magnum基本介绍

    Magnum is an OpenStack API service developed by the OpenStack Containers Team making container orche ...

  5. (转)Rsync命令详解

    Rsync命令详解 原文:http://blog.51cto.com/irow10/1826249 说明: Rsync是linux/Unix文件同步和传送工具.用于替代rcp的一个工具,rsync可以 ...

  6. Oracle同义词、索引、分区

    同义词:是现有对象的一个别名 简化SQL语句 隐藏对象的名称和所有者 提供对对象的公共访问 同义词共有两种类型 私有同义词只能在其模式内访问,且不能与当前模式的对象同名 公有同义词可被所有的数据库用户 ...

  7. JavaSE之Java基础（1）

    1.为什么重写equals还要重写hashcode 首先equals与hashcode间的关系是这样的: 1.如果两个对象相同(即用equals比较返回true),那么它们的hashCode值一定要相 ...

  8. js之静态方法与实例方法

    静态方法是指不需要声明类的实例就可以使用的方法. 实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法. function staticCla ...

  9. jQuery核心探究

    动画animate.animate({}, { duration: 5000, progress: function (now, progressNum) {}, complete: function ...

  10. SpringBoot常用应用程序属性

    参考地址: https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.h ...