使用js实现的关联表单,应用的主要知识是关于js中表单的应用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div{ 100px; height: 100px; } select{ 100px; height: 50px; } </style> </head> <body> <label> <select id="province" name="province" > <option>请选择省份</option> <option >山东</option> <option >福建</option> <option >广州</option> </select> </label> <select id="city"> <option>请选择城市</option> </select> <script type="text/javascript"> window.onload=function(){ var province=document.getElementById("province"); var city=document.getElementById("city"); var citys=[ ["泰安","济南","青岛"], ["厦门","泉州","莆田"], ["广东","东莞","新乡"] ]; province.onchange=function(){ var procity=citys[province.selectedIndex-1]; city.options.length=1; for(var i=0;i<procity.length;i++){ city.add(new Option(procity[i],procity[i])); city.children[0].setAttribute("selected","selected"); } } } </script> </body> </html>
如上:
知识点:html中表单选项的应用