通过创建元素从而实现三个下拉框的联动效果(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=" ...
随机推荐
- SQLSERVER数据库管理员的专用连接DAC
出处: http://www.cnblogs.com/lyhabc/archive/2012/09/23/2698702.html DAC:Dedicated Admin Connection 当SQ ...
- Java高并发实战，锁的优化
锁优化 这里的锁优化主要是指 JVM 对 synchronized 的优化. 自旋锁 互斥同步进入阻塞状态的开销都很大,应该尽量避免.在许多应用中,共享数据的锁定状态只会持续很短的一段时间.自旋锁的思 ...
- 离线安装Cloudera Manager5.3.4与CDH5.3.4
文章转载:http://www.aboutyun.com/thread-14024-1-1.html 前期准备工作(系统环境搭建) 操作系统:CentOS 6.5 x64 CPU*2 64G 300G ...
- 教程 | 使用Sqoop从MySQL导入数据到Hive和HBase
基础环境 sqoop:sqoop-1.4.5+cdh5.3.6+78, hive:hive-0.13.1+cdh5.3.6+397, hbase:hbase-0.98.6+cdh5.3.6+115 S ...
- Samba完整篇 ubuntu 10.04
基本的服务器准备工作 修改Root密码 sudo passwd root 在提示下建立新密码 修改静态IP: sudo gedit /etc/network/interfaces #网络配置文件 ...
- 关于jQuery写插件及其演示
关于写jQuery插件是非常有必要的.这是前端学习其中必须经过的一个过程 对于初次写插件先想清楚原理 (function($){ $.fn.yourName = function(opt ...
- docker+zabbix，使用docker搭建zabbix服务
Zabbix 介绍 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...
- Cookies 初识 Dotnetspider EF 6.x、EF Core实现dynamic动态查询和EF Core注入多个上下文实例池你知道有什么问题？ EntityFramework Core 运行dotnet ef命令迁移背后本质是什么？（EF Core迁移原理）
Cookies 1.创建HttpCookies Cookie=new HttpCookies("CookieName");2.添加内容Cookie.Values.Add(&qu ...
- Swift 1.1语言第7章 函数和闭包
Swift 1.1语言第7章 函数和闭包 在编程中,随着处理问题的越来越复杂.代码量飞速添加. 当中,大量的代码往往相互反复或者近似反复.假设不採有效方式加以解决.代码将非常难维护. 为了解决问题, ...
- easyUI datagrid 前端真分页
前文再续,书接上一回.easyUI datagrid 前端假分页 http://blog.csdn.net/leftfist/article/details/43164977 真分页是easyUI d ...