通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")...

最新推荐文章于 2021-01-18 15:44:18 发布

weixin_30709635

最新推荐文章于 2021-01-18 15:44:18 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/1020182600HENG/p/6071043.html

版权

 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>

转载于:https://www.cnblogs.com/1020182600HENG/p/6071043.html

weixin_30709635

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过创建元素从而实现三个下拉框的联动效果(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=fal...
复制链接

扫一扫