3一、任務三十一——表單聯動

時間 2019-12-13

標籤任務三十一表單聯動欄目 HTML 简体版

原文原文鏈接

0、題目

如示例圖中所示，在頁面中完成兩個單選框，切換單選框的不一樣選項時下方顯示的表單隨之切換。
當選擇在校生時，出現兩個select下拉菜單，一個選擇城市，一個選擇學校，當選擇非在校生時，出一個文本輸入框
學校下拉菜單裏的學校名單均爲城市下拉菜單中所選的城市中的大學，當城市發生變化時，學校一塊兒發生變化
城市及學校的數據隨意編造便可，無需真實完整

一、解題過程

  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  }