zoukankan      html  css  js  c++  java
  • 原生js下拉菜单联动

    原生的js联动

     

     代码部分

    <!DOCTYPE html>
    <html>
    
    <head>
           <meta charset="UTF-8">
           <title>联动</title>
           <script type="text/javascript">
                  function fn() {
                         var select = document.getElementById("type");
                         var c = select.value;
                         var area = document.getElementById("area");
                         switch (c) {
                                case "fruit": area.innerHTML = "<option>苹果</option><option>橘子</option><option>梨</option><option>桃</option>";
                                       break;
                                case "animal": area.innerHTML = "<option>老虎</option><option>狮子</option><option>大象</option><option>猴子</option>";
                                       break;
                                case "plant": area.innerHTML = "<option>月季</option><option>菊花</option><option>郁金香</option><option>松树</option>";
                                       break;
                                default: alert("error");
                         }
                  };
           </script>
    </head>
    
    <body>
           <select id="type" onchange="fn()">
                  <option value="fruit">水果</option>
                  <option value="animal">动物</option>
                  <option value="plant">植物</option>
           </select>
           <select id="area">
                  <option>苹果</option>
                  <option>橘子</option>
                  <option></option>
                  <option></option>
           </select>
    </body>
    
    </html>
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    [Usaco2008 Nov]mixup2 混乱的奶牛
    [Poi2004] 旅行问题
    [洛谷P1278]单词游戏
    redis20
    redis19
    redis18
    OHC Java堆外缓存详解与应用
    SQL优化
    Mysql安装、字符、引擎设置
    大文件下载
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11457489.html
Copyright © 2011-2022 走看看