我的jsDemo1 级联图-CSDN博客

本文链接：https://blog.csdn.net/yang_chang_chang/article/details/81190708

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>级联表</title>
   <script type="text/javascript" src="docTools.js"></script>
   <script type="text/javascript">
       function change()
       {
           var arr=[
           ['--选择城市--'],
           ['武汉市','荆州市','恩施州','黄石市'],
           ['长沙市','株洲市','湘潭市','衡阳市'],
           ['虹口区','浦东区','普陀区','嘉定区'],
           ['朝阳区','海定区','丰台区','昌平区']]

           selNode1=getById("selId1");
           selNode2=getById("selId2");
           var index=selNode1.selectedIndex;
           var citys=arr[index];

//删除options节点中的数据，不然就会造成数据的累加现象，比如对此点击湖北会出现['武汉市','荆州市','恩施州','黄石市'],

//然后再点击北京则会出现['武汉市','荆州市','恩施州','黄石市'], ['朝阳区','海定区','丰台区','昌平区']]依次类推
           for(var x=0;x<selNode2.options.length;)
           {
               selNode2.removeChild(selNode2.options[x]);
           }

           for(var i=0;i<citys.length;i++)
           {
               var optionNode=doc.createElement("option");
               optionNode.innerText=citys[i];
               selNode2.add(optionNode);

               // selNode2.options[i]=arr[i];
           }

       }
   </script>
</head>
<body>
   <select id="selId1" οnchange="change()">
       <option>--地区--</option>
       <option>湖北</option>
       <option>湖南</option>
       <option>上海</option>
       <option>北京</option>
   </select >
   <select id="selId2">
       <option>--选择城市--</option>
   </select>
</body>
</html>