通过创建元素从而实现三个下拉框的联动效果(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=" ...
随机推荐
- Pagodas 等差数列
nn pagodas were standing erect in Hong Jue Si between the Niushou Mountain and the Yuntai Mountain, ...
- openFileOutput 文件属性设置、主动配置文件的可读写属性及事实上现方式
首先參考 Android 内部存储相关的函数(getCacheDir,getDir, getFileStreamPath,getFilesDir,openFileInput, ...) 1. 用ope ...
- Windows Server 2012关机的几种方法
综合使用方法如下: 1.shutdown -r –f 強制重新启动 2.shutdown –s –f 強制关闭 方法/步骤 1 首先把鼠标移到任务栏右下角,时间往右一点小空位,稍微停留一 ...
- vux 实现多栏滚动
1.PopupPicker 组件 <!-- vux-ui --> <template> <div> <!-- 标题栏 --> <x-header ...
- MySQL具体解释（21）------------缓存參数优化
数据库属于 IO 密集型的应用程序.其主要职责就是数据的管理及存储工作. 而我们知道,从内存中读取一个数据库的时间是微秒级别,而从一块普通硬盘上读取一个IO是在毫秒级别,二者相差3个数量级.所以,要优 ...
- please get a license from www.texturepacker.com
我们在使用texturepacker创建资源后,在使用资源时出现下述问题:please get a license from www.texturepacker.com 如图: 这个是由于我们的版本号 ...
- MySQL-数据表锁定
MySQL允许客户端会话明确获取表锁,以防止其他会话在特定时间段内访问表.客户端会话只能为自己获取或释放表锁.它不能获取或释放其他会话的表锁. 创建一个数据表: CREATE DATABASE IF ...
- HTTP要点概述：七，编码，压缩传输，分块传输
一,编码: HTTP 在传输数据时可以按照数据原貌直接传输,但也可以在传输过程中通过编码提升传输速率.通过在传输时编码,能有效地处理大量的访问请求.但是,编码的操作需要计算机来完成,因此会消耗更多的 ...
- ubuntu安装wine 安装QQ
安装最新版 wine sudo dpkg --add-architecture i386 sudo add-apt-repository ppa:wine/wine-builds sudo apt-g ...
- iOS开发－多台机器共用证书问题
今天又被证书的问题卡壳了: 在公司的电脑上申请的开发.发布证书,回家用自己的电脑从苹果开发者中心上将证书和配置文件都下载下来提示用不了,弄了很久才想起.p12文件,必须从申请证书的电脑上导出,导入到自 ...