通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")相关的知识，希望对你有一定的参考价值。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>下拉框</title> 5 <script language="javascript"> 6 function reg(){ 7 var p,c,a,flag=false; 8 p=document.getElementById("pro").value; 9 c=document.getElementById("city").value; 10 a=document.getElementById("area").value; 11 //alert(p+"__"+c+"__"+a); 12 if(p.match("请选择")||c.match("请选择")||a.match("请选择")){ 13 alert("请将籍贯选择完整！"); 14 return false; 15 } 16 } 17 </script> 18 </head> 19 <body> 20 <form method="post" action="xxx.jsp"> 21 <table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin:10% 26%"> 22 <tr> 23 <td align="center" width="200px">籍贯</td> 24 <td align="center" width="200px"><select id="pro" onchange="createCity(this)"><option>--请选择--</option></select></td> 25 <td align="center" width="200px"><select id="city" onchange="createArea(this)"><option>--请选择--</option></select></td> 26 <td align="center" width="200px"><select id="area"><option>--请选择--</option></select></td> 27 </tr> 28 <tr><td colspan="4" align="center"><input type="submit" onclick="return reg()"/></td></tr> 29 </table> 30 </form> 31 <script language="javascript"> 32 //创建一个省份数组[] 33 var provinces=[]; 34 //数组里的每个值都是对象{} 35 provinces[0]={pid:‘上海‘,pname:‘上海‘,city:[{cid:‘黄埔‘,cname:‘黄埔‘,area:[{aid:‘外滩‘,aname:‘外滩‘},{aid:‘新天地‘,aname:‘新天地‘},{aid:‘南京东路‘,aname:‘南京东路‘}]},{cid:‘静安‘,cname:‘静安‘,area:[{aid:‘静安寺‘,aname:‘静安寺‘},{aid:‘美琪大戏院‘,aname:‘美琪大戏院‘},{aid:‘胡公馆‘,aname:‘胡公馆‘}]},{cid:‘徐汇‘,cname:‘徐汇‘,area:[{aid:‘衡山路‘,aname:‘衡山路‘},{aid:‘龙华寺‘,aname:‘龙华寺‘},{aid:‘桂林公园‘,aname:‘桂林公园‘}]}]}; 36 provinces[1]={pid:‘江苏‘,pname:‘江苏‘,city:[{cid:‘南京‘,cname:‘南京‘,area:[{aid:‘中山陵‘,aname:‘中山陵‘},{aid:‘明孝陵‘,aname:‘明孝陵‘},{aid:‘玄武湖‘,aname:‘玄武湖‘}]},{cid:‘连云港‘,cname:‘连云港‘,area:[{aid:‘花果山‘,aname:‘花果山‘},{aid:‘秦山岛‘,aname:‘秦山岛‘},{aid:‘孔望山‘,aname:‘孔望山‘}]},{cid:‘苏州‘,cname:‘苏州‘,area:[{aid:‘太湖‘,aname:‘太湖‘},{aid:‘狮子林‘,aname:‘狮子林‘},{aid:‘周庄‘,aname:‘周庄‘}]}]}; 37 provinces[2]={pid:‘安徽‘,pname:‘安徽‘,city:[{cid:‘合肥‘,cname:‘合肥‘,area:[{aid:‘逍遥津‘,aname:‘逍遥津‘},{aid:‘天鹅湖‘,aname:‘天鹅湖‘},{aid:‘包公园‘,aname:‘包公园‘}]},{cid:‘安庆‘,cname:‘安庆‘,area:[{aid:‘天柱山‘,aname:‘天柱山‘},{aid:‘迎江寺‘,aname:‘迎江寺‘},{aid:‘振风塔‘,aname:‘振风塔‘}]},{cid:‘黄山‘,cname:‘黄山‘,area:[{aid:‘奇松‘,aname:‘奇松‘},{aid:‘怪石‘,aname:‘怪石‘},{aid:‘云海‘,aname:‘云海‘}]}]}; 38 39 //创建自动生成的省份 40 function createProvince(){ 41 var pro=document.getElementById("pro"); 42 //pro.options.length=0;//默认显示第一行 43 for(var i=0;i<provinces.length;i++){ 44 var opt=document.createElement("option"); 45 opt.innerText=provinces[i].pid; 46 opt.value=provinces[i].pname; 47 pro.options.add(opt); 48 } 49 } 50 //创建根据省份名称从而动态创建城市名称 51 function createCity(obj){ 52 var city=document.getElementById("city"); 53 //city.options.length=0;//默认显示第一行 54 city.options.length=1; 55 for(var i=0;i<provinces.length;i++){ 56 if(obj.value==provinces[i].pname){ 57 var citys=provinces[i].city; 58 for(var j=0;j<citys.length;j++){ 59 var opt=document.createElement("option"); 60 opt.innerText=citys[j].cid; 61 opt.value=citys[j].cname; 62 city.options.add(opt); 63 } 64 } 65 } 66 } 67 //根据城市名称动态创建区域名称 68 function createArea(obj){ 69 var area=document.getElementById("area"); 70 area.options.length=1; 71 for(var i=0;i<provinces.length;i++){ 72 var citys=provinces[i].city; 73 for(var j=0;j<citys.length;j++){ 74 //alert(obj.value+"_____"+citys[j].cname); 75 if(obj.value==citys[j].cname){ 76 var areas=citys[j].area; 77 for(var k=0;k<areas.length;k++){ 78 var opt=document.createElement("option"); 79 opt.innerText=areas[k].aid; 80 opt.value=areas[k].aname; 81 area.options.add(opt); 82 } 83 } 84 } 85 } 86 } 87 //默认第一行为请选择 88 createProvince(); 89 90 //默认显示第一行 91 //createProvince(); 92 //createCity(document.getElementById("pro")); 93 </script> 94 </body> 95 </html>
<html> <head> <meta charset="utf-8"> <title>下拉框</title> <script language="javascript"> function reg(){ var p,c,a,flag=false; p=document.getElementById("pro").value; c=document.getElementById("city").value; a=document.getElementById("area").value; //alert(p+"__"+c+"__"+a); if(p.match("请选择")||c.match("请选择")||a.match("请选择")){ alert("请将籍贯选择完整！"); return false; } } </script> </head> <body> <form method="post" action="xxx.jsp"> <table border="1" cellspacing="0" cellpadding="5px" width="600px" style="margin:10% 26%"> <tr> <td align="center" width="200px">籍贯</td> <td align="center" width="200px"><select id="pro" onchange="createCity(this)"><option>--请选择--</option></select></td> <td align="center" width="200px"><select id="city" onchange="createArea(this)"><option>--请选择--</option></select></td> <td align="center" width="200px"><select id="area"><option>--请选择--</option></select></td> </tr> <tr><td colspan="4" align="center"><input type="submit" onclick="return reg()"/></td></tr> </table> </form> <script language="javascript"> //创建一个省份数组[] var provinces=[]; //数组里的每个值都是对象{} provinces[0]={pid:‘上海‘,pname:‘上海‘,city:[{cid:‘黄埔‘,cname:‘黄埔‘,area:[{aid:‘外滩‘,aname:‘外滩‘},{aid:‘新天地‘,aname:‘新天地‘},{aid:‘南京东路‘,aname:‘南京东路‘}]},{cid:‘静安‘,cname:‘静安‘,area:[{aid:‘静安寺‘,aname:‘静安寺‘},{aid:‘美琪大戏院‘,aname:‘美琪大戏院‘},{aid:‘胡公馆‘,aname:‘胡公馆‘}]},{cid:‘徐汇‘,cname:‘徐汇‘,area:[{aid:‘衡山路‘,aname:‘衡山路‘},{aid:‘龙华寺‘,aname:‘龙华寺‘},{aid:‘桂林公园‘,aname:‘桂林公园‘}]}]}; provinces[1]={pid:‘江苏‘,pname:‘江苏‘,city:[{cid:‘南京‘,cname:‘南京‘,area:[{aid:‘中山陵‘,aname:‘中山陵‘},{aid:‘明孝陵‘,aname:‘明孝陵‘},{aid:‘玄武湖‘,aname:‘玄武湖‘}]},{cid:‘连云港‘,cname:‘连云港‘,area:[{aid:‘花果山‘,aname:‘花果山‘},{aid:‘秦山岛‘,aname:‘秦山岛‘},{aid:‘孔望山‘,aname:‘孔望山‘}]},{cid:‘苏州‘,cname:‘苏州‘,area:[{aid:‘太湖‘,aname:‘太湖‘},{aid:‘狮子林‘,aname:‘狮子林‘},{aid:‘周庄‘,aname:‘周庄‘}]}]}; provinces[2]={pid:‘安徽‘,pname:‘安徽‘,city:[{cid:‘合肥‘,cname:‘合肥‘,area:[{aid:‘逍遥津‘,aname:‘逍遥津‘},{aid:‘天鹅湖‘,aname:‘天鹅湖‘},{aid:‘包公园‘,aname:‘包公园‘}]},{cid:‘安庆‘,cname:‘安庆‘,area:[{aid:‘天柱山‘,aname:‘天柱山‘},{aid:‘迎江寺‘,aname:‘迎江寺‘},{aid:‘振风塔‘,aname:‘振风塔‘}]},{cid:‘黄山‘,cname:‘黄山‘,area:[{aid:‘奇松‘,aname:‘奇松‘},{aid:‘怪石‘,aname:‘怪石‘},{aid:‘云海‘,aname:‘云海‘}]}]}; //创建自动生成的省份 function createProvince(){ var pro=document.getElementById("pro"); //pro.options.length=0;//默认显示第一行 for(var i=0;i<provinces.length;i++){ var opt=document.createElement("option"); opt.innerText=provinces[i].pid; opt.value=provinces[i].pname; pro.options.add(opt); } } //创建根据省份名称从而动态创建城市名称 function createCity(obj){ var city=document.getElementById("city"); //city.options.length=0;//默认显示第一行 city.options.length=1; for(var i=0;i<provinces.length;i++){ if(obj.value==provinces[i].pname){ var citys=provinces[i].city; for(var j=0;j<citys.length;j++){ var opt=document.createElement("option"); opt.innerText=citys[j].cid; opt.value=citys[j].cname; city.options.add(opt); } } } } //根据城市名称动态创建区域名称 function createArea(obj){ var area=document.getElementById("area"); area.options.length=1; for(var i=0;i<provinces.length;i++){ var citys=provinces[i].city; for(var j=0;j<citys.length;j++){ //alert(obj.value+"_____"+citys[j].cname); if(obj.value==citys[j].cname){ var areas=citys[j].area; for(var k=0;k<areas.length;k++){ var opt=document.createElement("option"); opt.innerText=areas[k].aid; opt.value=areas[k].aname; area.options.add(opt); } } } } } //默认第一行为请选择 createProvince(); //默认显示第一行 //createProvince(); //createCity(document.getElementById("pro")); </script> </body> </html>
以上是关于通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")的主要内容，如果未能解决你的问题，请参考以下文章