原生js下拉菜单联动

最新推荐文章于 2024-04-30 16:57:21 发布

r123c

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量254

点赞数

分类专栏： js 文章标签： javascript

原文链接：https://www.cnblogs.com/zhangcheng001/p/11457489.html

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原生的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" οnchange="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>

r123c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生js下拉菜单联动

原生的js联动代码部分<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>联动</title> <script type="text/javascript"> function fn() { var sele...
复制链接

扫一扫