下拉框级联

最新推荐文章于 2024-04-30 16:07:36 发布

kebikakaxi

最新推荐文章于 2024-04-30 16:07:36 发布

阅读量577

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/kebikakaxi/article/details/8161360

JS 专栏收录该内容

4 篇文章

订阅专栏

之前写过的关于下拉框级联的代码（js也是从网上找的吐舌头），先记下来方便以后查看

<html>
<head>
<title>备份管理</title>
<script type="text/javascript">

   var cityList = new Array(); //定义城市数组
   cityList['每月'] = [ '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11',
           '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22',
           '23', '24', '25', '26', '27', '28', '29', '30', '31' ];
   cityList['每周'] = [ '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日' ];
   cityList['每天'] = [ '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11',
           '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22',
           '23', '24' ];

   function changeCity() {
       var province = document.myform.province.value;
       document.myform.city.options.length = 0;
       for ( var i in cityList) {
           if (i == province) {
               for ( var j in cityList[i]) //根把对应城市动态创建区域option
               {
                   document.myform.city.options.add(new Option(cityList[i][j],
                           cityList[i][j]));
               }
           }
       }
       document.myform.city.options.selectIndex = 3;
   }

   function loadAll() //动态创建城市option
   {
       for ( var i in cityList) {
           document.myform.province.options.add(new Option(i, i));
       }
       document.myform.province.selectedIndex = 0;
   }

</script>

</head>

<body onload="loadAll( )">

   <div class="main">
       <div class="tabox">
           <form action="#" method="post" name="myform">
               <p>
                   自动备份：是<input type="radio" name="auto" checked="checked" value="1" />
                      否<input name="auto" type="radio" value="0" />
               </p>
               <p>
                   备份周期：<select name="province" id="province" onchange="changeCity()">
                       <option>--请选择时间--</option>
                   </select> <select name="city" id="city">
                       <option>--请选择时间--</option>
                   </select>
               </p>
               <p>
                   备份路径：<input type="file" />
               </p>
               <input type="submit" value="确定" class="submit" /><input type="reset"
                   value="重置" class="submit" />

           </form>
       </div>
   </div>

</body>

</html>

下拉框 级联

下拉框级联