通过创建元素从而实现三个下拉框的联动效果(create.Element("option"))和提交表单时的验证p.match("请选择")
<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>
<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("请选择")的更多相关文章
- 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
$(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...
- selenium 难定位元素，时间插件，下拉框定位，string
1.元素定位 ID定位元素: findElement(By.id(“”)); 通过元素的名称定位元素: findElement(By.name(“”)); 通过元素的html中的位置定位元素: fin ...
- selenium 难定位元素，时间插件，下拉框定位，string包含，定位列表中的一个，技巧
关于frame: 如果网页存在iframe的话,传统的定位有时候找不到元素,需要切换frame: # 切换到leftFrame定位“测井设计” driver.switch_to_frame(" ...
- C# MVC LayUI实现下拉框二级联动
一.layui.use 1.LayUI的官方使用文档:https://www.layui.com/doc/ 2.layui的内置模块不是默认就加载好的,必须要执行启动模块的这种方法后模块才会加载: 3 ...
- asp 下拉框二级联动
<script language = "JavaScript"> //js开始 var aaa;//定义aaa变量 aaa=0;//aaa赋0 bb = new Arr ...
- 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- KindEditor设置为过滤模式，但在代码模式下提交表单时不过虑HTML标签的解决方法
KindEditor设置filterMode为true,但在代码模式下提交表单的话,发现并没有过虑掉自己不想保留的HTML标签. 这时只需同步内容前加上红色部分内容即可: onClick=" ...
- ASP.NET——实现两个下拉框动态联动
引入: 在网页中,我们经常会遇到下图中的情况.首先在下拉框中选择所在的省,选择之后,第二个下拉框会自动加载出该省中的市.这样设计极大的方便了用户的查找.那这是如何实现的呢? 1.建立数据库 " ...
- django：下拉框二级联动实现
注意:只列举核心部分代码 前台模板: 第一级下拉菜单: <div class="col-sm-4"> <select data-placeholder=" ...
随机推荐
- 2.5 3-way quickSort
1.排序时,数组含有大量重复元素,应该使用哪种排序手段? (1)mergeSort:与数组的特征无关,比较次数总是在1/2NlgN~NlgN之间 (2)quickSort:当所有的元素全都相同的时候, ...
- Linux下汇编语言学习笔记27 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
- javaSctipt基础
===================================== JavaScript 脚本语言===================================== 什么是JavaSc ...
- Codeforces Gym100495 B、D、E、F、K
http://codeforces.com/gym/100495 K题 草地的面积减去相交的面积,计算几何,垃圾题,避免不必要的计算损失精度(能约分的约分) 卡了老子一个星期了 再加前几天的一道题 这 ...
- 使用idea编译spring-framework5.0源码
自从迈入java开发这个行当,从来没有好好的研究过源码,深感惭愧,话不多说,今天上一篇使用idea编译spring5.0源码. 以下在win中构建和编译过程分为 jdk环境的配置 gradle的下载和 ...
- SVG :可缩放矢量图形（Scalable Vector Graphics）。
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 使用 XML ...
- C#如何编辑tab选项卡
1 左侧的TabControl 2 如果要添加或删除选项卡个数,则定位到整个TabControl,然后编辑TabPages
- HDU 5319 Painter(枚举)
Painter Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Su ...
- C/C++综合測试题(四)
又刷了一套题 这些题都是百度.阿里巴巴.腾讯.网易.新浪等公司的面试原题.有一定的难度.只是确实相当有水平.能够通过做题来查漏补缺. 11.以下代码的输出是什么? class A { public: ...
- TMS320F28335项目开发记录6_28335之cmd文件具体解释
1.CMD文件的作用 CMD文件的作用就像仓库的货物摆放记录一样,为程序代码和数据分配指定的空间. 2.C语言生成的段 C语言生成的段大致分为两大类:初始化和未初始化,已初始化的段含有真正的指令和数据 ...