<!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 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>

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程。

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。


原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

通过select下拉框里的value控制div显示与隐藏的更多相关文章

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

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

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

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

  3. Django forms表单 select下拉框的传值

    今儿继续做项目,学习了Django的forms生成前端的代码. forms.py class SignupForm(forms.Form): username = forms.CharField(va ...

  4. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  5. select下拉框可以直接取list里的内容 不用非得转map (不得不承认我是个ZZ，这么简单的问题才反应过来，--^--)

    需求描述:select下拉框的填充项,从后台传来的list中获取 自黑一下:之前有篇随笔,写的是通过map传到前台,在前台的select中的value属性取值 用map的key,而select的tex ...

  6. 好看的Select下拉框是如何制造的

    现在在大多数网站中都能看到很华丽的Select下拉框,他们是如何实现的呢?使用默认select肯定是不好实现,我们可以使用div+js去模拟出来select的功能,并且又能很简单的去美化它. CSS代 ...

  7. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

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

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

  9. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

随机推荐

  1. HDU3689 Infinite monkey theorem 无限猴子(字符串DP+KMP)

    题目描述: 大概的意思就是根据无限猴子定理,无限只猴子坐在打字机旁瞎敲,总有一个能敲出莎士比亚文集.现在给你一个打字机和一只猴子,打字机的每个按钮(共n个)上的字母及猴子按下这个按钮的概率已知,而且猴 ...

  2. CISP/CISA 每日一题 八

    CISA 每日一题(答)网关执行电子邮件格式转换 电子邮件安全——加密 大文件——对称加密 不可否认——非对称 哈希——完整性     电子银行主要风险: 战略.经营和声誉上的风险 双SSP每日一题 ...

  3. CISP/CISA 每日一题

    CISA 业务流程控制鉴证中要考虑的特定因素: 1.流程图 2.流程控制 3.在流程中评估业务风险 4.对最佳实践进行标杆管理 5.角色与责任 6.活动与任务 7.数据限制   信息系统审计师的任务是 ...

  4. 【2017 Multi-University Training Contest - Team 7】Kolakoski

    [Link]:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1011&cid=765 [Description] 有一种 ...

  5. springMVC注解用法：@modelattribute的用法

    在Spring MVC里,@ModelAttribute通常使用在Controller方法的参数注解中,用于解释model entity,但同时,也可以放在方法注解里. 如果把@ModelAttrib ...

  6. python-string中部分string替换

    今天遇到一个问题,就是需要把 “/home/zhangshuli/32_kk/” 中的32_kk 替换成为 52_kk 然后就在网上找方法,刚开始尝试的方法是 aaa = "/home/zh ...

  7. 程序是怎么跑起来的？ —— CPU 是什么？C/C++程序的运行

    1. 概念初步 程序:计算机的程序,和做饭.运动会的程序一样,指的是"做事的先后次序": 程序的组成:程序是指令(及物动词)和数据(宾语)的组合体: C 语言 printf(&qu ...

  8. 117.C语言实现桌面输出图片,桌面输出文字,桌面画线

    通过获取窗口句柄,然后获取窗口DC,然后画图 #include <Windows.h> #include <stdio.h> //桌面画线 void drawLine() { ...

  9. java 文件读写--转载

    读文件 http://www.baeldung.com/java-read-file Java – Read from File 1. Overview In this tutorial we’ll ...

  10. a-star算法

    http://blog.csdn.net/shanshanpt/article/details/8977512 这篇文章讲得不错. 所谓的启发函数,所谓权值之类(此处所谓的权值就是路劲的长度).YES ...