31、任务三十一—

31、任务三十一——表单联动

0、题目

如示例图中所示，在页面中完成两个单选框，切换单选框的不同选项时下方显示的表单随之切换。
当选择在校生时，出现两个select下拉菜单，一个选择城市，一个选择学校，当选择非在校生时，出一个文本输入框
学校下拉菜单里的学校名单均为城市下拉菜单中所选的城市中的大学，当城市发生变化时，学校一起发生变化
城市及学校的数据随意编造即可，无需真实完整

1、解题过程

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8">
  5     <title>IFE JavaScript Task 31</title>
  6     <style>
  7     form{
  8         margin:auto;
  9         width:800px;
 10         font-size:22px;
 11         margin-top: 100px;
 12         text-align:center;
 13     }
 14     .notStudent{
 15         margin-left: 60px;
 16     }
 17     select{
 18         width:300px;
 19         height:30px;
 20         margin:60px 30px 20px 30px;
 21         border:2px solid #ccc;
 22         border-radius: 7px;
 23     }
 24     #city{
 25         width:150px;
 26     }
 27     #employment{
 28         width:500px;
 29         height:30px;
 30         border:2px solid #ccc;
 31         border-radius: 7px;
 32         margin-left: 20px; 
 33     }
 34     select:focus,#employment:focus{
 35         outline: none;
 36         border:2px solid #7dace9;
 37         border-radius: 7px;
 38     }
 39     #inSchool{
 40         display:none;
 41     }
 42     #outSchool{
 43         display: none;
 44         margin-top: 60px;
 45     }
 46     </style>
 47   </head>
 48 <body>
 49 <form>
 50     <label for="student" class="student">在校生</label>
 51 　　 　　<input id="student" name="people" type="radio">
 52     <label for="notstudent" class="notStudent">非在校生</label>
 53     　　 <input id="notstudent" name="people" type="radio">
 54     <div id="inSchool">
 55         <label>学校</label>
 56         <select id="city">
 57             <option id="bj" class="opt">北京</option>
 58             <option id="sh" class="opt">上海</option>
 59             <option id="wh" class="opt">武汉</option>
 60             <option id="xa" class="opt">西安</option>
 61         </select>
 62         <select id="collage">
 63             <option>北京大学</option>
 64             <option>清华大学</option>
 65             <option>中国人民大学</option>
 66             <option>北京师范大学</option>
 67         </select>
 68     </div>
 69     <div id="outSchool">
 70         <label for="employment">就业单位<label>
 71             <input type="text" id="employment">
 72     </div>
 73 </form>
 74 <script type="text/javascript" >
 75 function $(id){
 76     return document.getElementById(id);
 77 }
 78 //选中在校生
 79 $("student").addEventListener("click",function(){
 80     $("outSchool").style.display="none";
 81     $("inSchool").style.display="block";
 82 });
 83 //选中非在校生
 84 $("notstudent").addEventListener("click",function(){
 85     $("inSchool").style.display="none";
 86     $("outSchool").style.display="block";
 87 });
 88 var data={
 89     bj:["北京大学","清华大学","中国人民大学","北京师范大学"],
 90     sh:["复旦大学","上海交通大学","同济大学","华东师范大学"],
 91     wh:["武汉大学","华中科技大学","华中农业大学","武汉理工大学"],
 92     xa:["西安交通大学","西北大学","西北工业大学","陕西师范大学"]
 93 }
 94 //城市选项改变时触发事件
 95 $("city").addEventListener("change",change);
 96 
 97 //二级表单联动（一次循环）
 98 var options=document.getElementsByClassName('opt');//得到城市名数组
 99 function change(){
100 　　　　　//得到被选中城市名的id
101         var id=options[$("city").selectedIndex].getAttribute("id"),  
102             content="";
103         for(var j=0;j<data[id].length;j++){
104             content+="<option>"+data[id][j]+"</option>";
105         } 
106         $("collage").innerHTML=content;    
107 }

 1 //二级表单联动（两次循环）
 2  var options=document.getElementsByClassName('opt');
 3  function change(){
 4  for(var i=0;i<options.length;i++){//遍历所有城市名得到被选中的那个
 5    if(options[i].selected){ 
 6         var id=options[i].getAttribute("id"),  
 7             content="";
 8          for(var j=0;j<data[id].length;j++){
 9             content+="<option>"+data[id][j]+"</option>";
10          } 
11          $("collage").innerHTML=content;    
12    }
13   }   
14  }

108 </script>
109 </body>
110 </html>

2、遇到的问题

（1）使用 input 创建单选按钮（radio）时，所有的选项的name应该一样；

（2）selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。（如果多重选择，则返回第一个被选中的索引号）

　　A、以下代码可在警告框中显示被选中的内容：　

　　var x=document.getElementById("myOptions");

　　alert(x[ x.selectedIndex ].innerHTML);

　　B、以下代码可以删除被选中的选项：

　　 x.remove(x.selectedIndex)