<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

    </head>

    <!-- <script>

        $(function() {

            //隐藏div

            $("#shouhou2").hide();

            $("#shouhou3").hide();

            //给div添加change事件

            $("#type").change(function() {

                if($(this).val() == 1 ) {

                    $("#shouhou1").show();

                    $("#shouhou2").hide();

                    $("#shouhou3").hide();

                } else if($(this).val() == 2 ) {

                    $("#shouhou2").show();

                    $("#shouhou1").hide();

                    $("#shouhou3").hide();

                }

                else if($(this).val() == 3 ) {

                    $("#shouhou3").show();

                    $("#shouhou1").hide();

                    $("#shouhou2").hide();

                }

            })

        })

    </script> -->

    <body>

     <select name=""  onchange="select(this)">

    　　<option value="1">题目一</option>

    　　<option value="2">题目二</option>

    　　<option value="3">题目三</option>

    　　<option value="4">题目四</option>

</select> 

<div>

　　<div  id="div1">内容一</div>

　　<div id="div2" style="display:none">内容二</div>

　　<div id="div3" style="display:none">内容三</div>

　　<div id="div4" style="display:none">内容四</div>

</div>

<script>

function select(obj){

$("#div" + obj.value).show().siblings().hide();

}

</script>

        <!-- <select class="select" size="1" name="type" id="type">

            <option value="1">表格</option>

            <option value="2">折线图</option>

            <option value="3">柱状图</option>

        </select>

        <div id="shouhou1" style>表格区域</div>

        <div id="shouhou2" style>折线图区域</div>

        <div id="shouhou3" style>柱状图区域</div> -->

    </body>

</html>

select下拉选中显示对应的div隐藏不相关的div的更多相关文章

  1. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  2. select 下拉选中

    <body> <select name="" id=""> <option value="">张三< ...

  3. 实现可搜索仿select下拉选中

    由于在优化项目中,发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象 1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他,同时搜索的不再是html文档片段,而是直接对数 ...

  4. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  5. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))

    一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...

  8. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  9. jquery操作select下拉框的各种方法，获取选中项的值或文本，根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

随机推荐

  1. [转帖]中信银行信用卡业务数据库实现国产替换，湖北银行新核心系统项目正式验收，阿里云与MongoDB达成战略合作

    中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作 http://www.itpub.net/2019/10/31/3942/ 中信银行 gold ...

  2. 【IDEA使用技巧】（4） —— IDEA 构建Java Maven项目、导入Eclipse项目、多Module Maven项目

    1.IntelliJ IDEA构建Java Maven项目 1.1. IDEA构建Java Maven项目 ①选择Create New Project,选择创建Maven项目,并勾选Create fr ...

  3. 一行代码让3D翻转后的文本恢复清晰

    FlashPlayer10提供的3D功能有一个相当蛋疼的问题:只要设置过rotationX.rotationY或者rotationZ属性,显示对象里面的文字(尤其是设备字体,位图文本)就会一直处于模糊 ...

  4. TypeScript之枚举

    什么是枚举类型,有什么作用? 枚举类型就是一个用来组织一些有相似之处的常量的对象,作用就是管理常量,让常量更规范,统一.例: enum Direction { Up = 1, Down, Left, ...

  5. Spring核心概念学习笔记

    1.Spring主要用到两种设计模式 1.1 工厂模式 Spring容器就是实例化和管理全部Bean的工厂. 工厂模式可以将Java对象的调用者从被调用者的实现逻辑中分离出来. 调用者只关心被调用者必 ...

  6. VS 引用dll版本冲突问题

    1.删除项目中的对应引用: 2.如果是有用到NetGet引用的删除项目中的packages里面的对应包文件: 3.如果是在NetGet中引用的注释项目中packages.config对应的插件名: 4 ...

  7. .net core使用ocelot---第六篇 负载均衡

    简介 .net core使用ocelot---第一篇 简单使用 .net core使用ocelot---第二篇 身份验证 .net core使用ocelot---第三篇 日志记录  .net core ...

  8. DDL 操作数据库

    DDL 操作数据库:常用的操作 CRUD 一.C(create)创建 1.创建数据库 create database 数据库名称; 2.创建数据库,判断是否存在,再创建(如果存在,就不再创建) cre ...

  9. Appscan漏洞之跨站点请求伪造（CSRF）

    公司前段时间使用了Fortify扫描项目代码,在修复完这些Fortify漏洞后,最近又启用了Appscan对项目代码进行漏洞扫描,同样也是安排了本人对这些漏洞进行修复.现在,针对修复过的Appscan ...

  10. DRF 视图初识

    from django.shortcuts import render from rest_framework.generics import ListAPIView,CreateAPIView,Up ...