通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
2016-11-16 18:40
573 查看
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>View Code
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过创建元素从而实现两个下拉框的联动效果
- Jquery 实现表单验证，所有验证通过方可提交
- 如何通过jQuery实现select下拉框的联动效果
- Jquery 实现表单验证，所有验证通过方可提交
- 通过隐藏option实现select的联动效果
- 通过隐藏option实现select的联动效果 文章源自：烈火网，原文：http://www.veryhuo.com/a/view/10548.html
- 通过隐藏option实现select的联动效果
- 通过隐藏option实现select的联动效果
- Jquery 实现表单验证，所有验证通过方可提交
- jQuery实现所有验证通过方可提交的表单验证
- 通过隐藏option实现select的联动效果
- 通过隐藏option实现select的联动效果
- 通过隐藏option实现select的联动效果
- 通过隐藏option实现select的联动效果
- 原生js实现表单的正则验证，所有验证都通过后提交按钮才可用
- 通过隐藏option实现select的联动效果
- 通过jquery validate和bootstrap实现表单后面提示打钩或打叉的效果和真实的表单验证
- javascript表单验证通过提交，没通过不提交
- Ext_通过布局嵌套实现表单元素横排
- js用createElement新创建的元素能调用id