原生js下拉菜單聯動

本文轉載自查看原文 2019-09-04 10:32 610 原生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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui select下拉菜單聯動 jQuery cxSelect 多級聯動下拉菜單 ajax三級聯動下拉菜單 Dwz下拉菜單的二級聯動用JS控制下拉菜單效果 js 實現級聯下拉菜單 Dropdown 下拉菜單 CSS 下拉菜單 mui下拉菜單折疊下拉菜單