zoukankan      html  css  js  c++  java
  • html query控制显示隐藏(下拉框控制)

    <!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();
    $("#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>

  • 相关阅读:
    数据库练习题
    支付类项目
    crm项目整理
    React 生成二维码
    Charles抓页面配置mac端
    Python之列表生成式、生成器、可迭代对象与迭代器
    01 Django基础
    12 jQuery的ajax
    11 事件委托(事件代理)
    10 jQuery的事件绑定和解绑
  • 原文地址:https://www.cnblogs.com/ayanboke/p/11492760.html
Copyright © 2011-2022 走看看