2016-07-07 77 views
-1

如果我有一个表单,用户选择一个国家,然后他们选择一个国家,然后在该国的一个城市。什么是最简单的方法来做到这一点,所以当他们选择国家更新状态表格等?我会想象他们的这个一般的JavaScript库?与国家,城市等自动填写表格

回答

1

试试:

<html> 
 

 
<head> 
 
    <style> 
 
     .sel { 
 
      width: 200px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    Country : <select id="contry" class="sel"><option value=""></option></select><br><br> 
 
    State : <select id="state" class="sel"></select> 
 
    <script> 
 
     var contry = [ 
 
      {id:"Iran",state:['Tehran','Ahvaz','Shiraz']}, 
 
      {id:"Usa",state:['Alabama','Alaska','Florida']} 
 
     ] 
 
     var con = document.getElementById("contry"); 
 
     var sta = document.getElementById("state"); 
 
     for(var i=0; i<contry.length; i++) { 
 
      var op = document.createElement('option'); 
 
      op.value = contry[i].id; 
 
      op.innerHTML = contry[i].id; 
 
      con.appendChild(op); 
 
     } 
 
     con.onchange= function() { 
 
      sta.innerHTML = ""; 
 
      var cur = con.value; 
 
      if(cur.length > 0) { 
 
       for (var j = 0; j < contry.length; j++) 
 
        if (cur == contry[j].id) { 
 
         var myState = contry[j].state; 
 
         break; 
 
        } 
 
       for(var i=0; i<myState.length; i++) { 
 
       var op = document.createElement('option'); 
 
       op.value = myState[i]; 
 
       op.innerHTML = myState[i]; 
 
       sta.appendChild(op); 
 
     } 
 
       
 
         
 
      } 
 
     } 
 
     
 
    </script> 
 
</body>  
 
</html>

+0

@Rob,试试吧,请! – Ehsan