qq_39372401 2017-12-11 07:28 采纳率: 75%
浏览 1349
已采纳

请教各位大神，JS点击下拉框事件，点击A只显示文本框A，点击B只显示文本框B，点击C显示全部文本框

下拉框（文本1；文本2；文本3；全部显示）

点击文本1，显示文本框（文1），隐藏其他
.....
点击全部显示，显示文本框（文1.文2，文3）

最好用jquery来写，请给出代码

  • 写回答

15条回答 默认 最新

  • Jalen备忘录 2017-12-11 14:49
    关注
      <!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <form action="" method="get"> 
        <label>下拉列表菜单</label> 
        <br>
        <select name="selectBox" id="selectBox" onchange="pop();"> 
            <option value="0">文本一</option> 
            <option value="1">文本二</option> 
            <option value="2">全部显示</option> 
        </select> 
    </form>

    <div id="areaA" style="display: none;">
        <textarea>
            Hello1
        </textarea>
    </div>

    <div id="areaB" style="display: none;">
        <textarea>
            Hello2
        </textarea>
    </div>

    <div id="areaC" style="display: none;">
        <textarea>
            Hello3
        </textarea>
        <br>
        <textarea >
            World3
        </textarea>
    </div>

<script type="text/javascript">
    function pop() {
        var value = $("#selectBox").val();

        if ( value==="0" ) {
            $("#areaA").show();
            $("#areaB").hide();
            $("#areaC").hide();
        }
        if ( value==="1" ) {
            $("#areaB").show();
            $("#areaA").hide();
            $("#areaC").hide();
        }
        if ( value==="2" ) {
            $("#areaC").show();
            $("#areaA").hide();
            $("#areaB").hide();
        }
    }
</script> 
</body>
</html>

    大概这样子，还得修饰下

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(14条)

报告相同问题？

悬赏问题

  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 oracle集群安装出bug
  • ¥15 关于#python#的问题：自动化测试