通过创建元素从而实现三个下拉框的联动效果(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=" ...
随机推荐
- 莫比乌斯反演套路二--(n/d)(m/d)给提出来--BZOJ3529: [Sdoi2014]数表
一个数表上第i行第j列表示能同时整除i和j的自然数,Q<=2e4个询问,每次问表上1<=x<=n,1<=y<=m区域内所有<=a的数之和.n,m<=1e5,a ...
- nyoj_205_求余数_201404271630
求余数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在给你一个自然数n,它的位数小于等于一百万,现在你要做的就是求出这个数除10003之后的余数 输入 第一 ...
- [bzoj3306]树_dfs序_线段树_倍增lca
树 bzoj-3306 题目大意:给定一颗n个节点的树,支持换根.修改点权.查询子树最小值. 注释:$1\le n,q\le 10^5$. 想法: 如果没有换根操作,就是$dfs$序+线段树维护区间最 ...
- java设计模式——单例设计模式
/*设计模式:对问题行之有效的解决方式.其实它是一种思想. 1,单例设计模式. 解决的问题:就是可以保证一个类在内存中的对象唯一性. 必须对于多个程序使用同一个配置信息对象时,就需要保证该对象的 ...
- java监控工具jconsole
jconsole可以监控本地和远程进程 jvisualvm
- C#中Stack<T>类的使用及部分成员函数的源代码分析
Stack<T>类 Stack<T> 作为数组来实现. Stack<T> 的容量是 Stack<T> 能够包括的元素数. 当向 Stack<T&g ...
- P-Called-Party-ID头域
典型的proxy server在路由 INVITE 请求到目标时插入 P-Called-Party-ID 头域.该头域用 porxy 收到请求的 Request-URI 填写. UAS 从几个已注冊的 ...
- OpenLayers 3+Geoserver+PostGIS实现点击查询
WebGIS开发中,点击查询是最经常使用的一种查询方式,在ArcGIS api 中.这样的查询叫IdentifyTask,主要作用是前台提交參数.交ArcServer查询分析返回. 本文从开源框架的角 ...
- DOM 事件类
DOM事件的级别: DOM级别一共可以分4个级别:DOM0级.DOM1级. DOM2级 .DOM3级.而DOM事件级别分为3个级别:DOM0级事件处理.DOM2级事件处理.DOM3级事件处理 1. D ...
- [办公自动化]excel工作簿内的表无法删除，单击右键无删除键
今天同事问,我自己的工作簿,没有设置保护,但是就是无法删除其中的工作表. 后来发现,她的excel工作簿打开的文件名后面显示[共享]. 原因找到了. 取消共享就可以了.