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>
    ╰︶﹉⋛⋋⊱⋋๑๑⋌⊰⋌⋚﹉︶╯
  • 相关阅读:
    团队冲刺第二十三天
    团队冲刺第二十二天
    团队冲刺第二十一天
    团队冲刺第二十天
    第十四周周总结
    团队冲刺第十九天
    团队冲刺第十八天
    团队冲刺第十七天
    团队冲刺第十六天
    keeprunning的使用说明
  • 原文地址:https://www.cnblogs.com/zhangcheng001/p/11457489.html
Copyright © 2011-2022 走看看