做多重下拉列表?

如何做省份的下拉列表?

1获取select对象       var selProv=getEl("prov");//获取对象

2,遍历select对象        selProv.options[n]=opt;

3,获取省份对象

var prov=new Array(2);
prov["陕西"]=["西安","渭南","咸阳","汉中"];
prov["河南"]=["郑州","洛阳","开封"];
prov["四川"]=["成都","广元"];

4,遍历省份对象

for(var p in prov){
var opt=new Option(p);//创建一个Option对象
selProv.options[n]=opt;
n++;

如何获取市的下拉列表?

1获取select对象       var selCity=getEl("city")

2,遍历select对象     selCity.options[i]=opt;

3,获取市对象     var citys=prov[p];

4,遍历市的对象

for(var i=0;i<citys.length;i++){
var opt=new Option(citys[i]);
selCity.options[i]=opt;
}

全部代码:

<select id="prov" onchange="selCity(this);">
</select>省
<select id="city"></select>市
<script>
var prov=new Array(2);
prov["陕西"]=["西安","渭南","咸阳","汉中"];
prov["河南"]=["郑州","洛阳","开封"];
prov["四川"]=["成都","广元"];

function getEl(id){
return document.getElementById(id);
}

//初始化省份
function initProv(){
var selProv=getEl("prov");//获取对象
var n=0;
for(var p in prov){
var opt=new Option(p);//创建一个Option对象
selProv.options[n]=opt;
n++;
}
selCity(selProv);
}

function selCity(o){
var p=o.value;
var citys=prov[p];
var selCity=getEl("city");//获取HTML对象
//清除
selCity.options.length=0;

for(var i=0;i<citys.length;i++){
var opt=new Option(citys[i]);
selCity.options[i]=opt;
}
}

initProv();
</script>
</body>

 

时间: 2024-11-05 17:39:11

做多重下拉列表?的相关文章

Excel技巧--做一去重复的数据下拉列表

当我们有一数据列表(内含重复数据),将该数据做成如下图的下拉列表: 可以这样做: 1.选中该标题行,按ctrl+shift+下方向键,将该列有数据的区域选中: 2.点击“数据”—>删除重复项: 由于该数据列还有左侧的数字列,所以我们只对当前选定的区域进行删除重复项并排序. 或者也可以一开始将该列复制到空白处形成新的一列,再对该列进行去重复操作,这样不影响原数据. 3.再一次重复第1步骤选定好该列区域,点击“公式”-->“根据所选内容创建”,对话框选择“首行”. 4.选择要做的下拉列表的单元格,

AngularJs多重视图和路由的使用

使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目,通常不变的都是头部,尾部和菜单部分,变化的都是右边的内容部分,使用AngularJs的多重视图和路由就可以很方便的实现这样的效果.在实现之前需要准备两个文件,一个是angular的主JS文件,另一个是angular的路由JS文件,如下: <script src="js/angular.min.

下拉列表的制作

圣诞节后上课就是不在状态,一整天都在神游,还感觉特别累,本来想休息休息的,结果某人看不惯我一直吃东西,非得把电脑给我打开,让整理今天所学的内容,想了一下,确实上午讲的用无序列表<ul>做的下拉列表还不熟练,之前一直都是在用<div>做的,下面是用<ul>做的示例: <style> *{ margin:0px; padding:0px;} .a{ margin: auto; height:50px; width:460px; position:relative

select下拉列表js操作兼容性问题分享

做一个下拉列表鼠标移入改变对应的图片的值, $("select").mosover(function(){ //var i=$(this).find("selected","selected").text(); //改变对应的内容 }) 可是在谷歌上鼠标移到option上并没有变化,火狐好使. 无奈只能自己写个下拉菜单再进行DOM操作.

Geometric Context from a Single

这个是Derek Hoiem 2005年的文章,也算是对3D信息的利用的一个开启.主页链接是http://www.cs.uiuc.edu/homes/dhoiem/ 翻译呢是为了更好的理解,以后看的时候还可以回头直接看了,还可以随时添加笔记. 摘要 许多CV算法通过忽略图像潜在的3D几何结构而限制了他们的性能.我们展现了通过学习基于外观模型的几何类别来评估场景的粗糙几何属性,甚至是杂乱的自然场景.几何类别描述了图像区域关于相机的3D方向.我们提供了多重假设框架来鲁棒的评估从单张图像获得的场景结构

《响应式Web设计实践》学习笔记

原书: 响应式Web设计实践 第2章 流动布局 1. 布局选项 传统的固定布局中存在很多问题, 随着屏幕大小的越来越多元化, 固定布局已经不能适用了. 在流动布局中, 度量的单位不再是像素, 而是变成了百分比. 弹性布局与流动布局类似, 但是通常情况下, 弹性布局中会以em来作为单位. 带来一个好处是随着用户增大或减小字体, 适用弹性布局的元素的宽度也会等比例地变化. 但是其也可能出现水平滚动条 混合布局 媒体查询: 媒体查询允许根据设备的信息----诸如屏幕宽度, 方向或者分辨率等属性来使用不

maven 项目pom配置

一.什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url,项目的依赖性,以及其他所有的项目相关因素.  二.基本内容: POM包括了所有的项目信息. maven 相关: pom定义了最小的maven2元素,允许groupId,artifactId,version.所有需要的元素 groupId:项目或者组织的唯一标志,并且配置时生成的路径也是由此生成,

鸟哥之安裝 CentOS7.x

http://linux.vbird.org/linux_basic/0157installcentos7.php since 2002/01/01 新手建議 開始閱讀之前 網站導覽 Linux 基礎文件 Linux 基礎訓練 Linux 架站文件 Linux 企業應用 Linux 安全管理 Linux 桌面應用 鳥哥彙整的資料 關於鳥哥 網友分享 特殊問題解決 網站資料搜尋 今日 昨日 本月 上月  第三章.安裝 CentOS7.x 最近更新日期:2015/05/06 Linux distri

Maven常用命令大全与pom文件讲解

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要讲解是Maven使用过程中一些常用的命令,并配上图片说明,最后还讲了pom.xml文件的一些构造. 一.Maven常用命令 1.1.Maven 参数 -D 传入属性参数 -P 使用pom中指定的配置 -e 显示maven运行出错的信息 -o 离线执行命令,即不去远程仓库更新包 -X 显示maven允许的debug信息 -U 强制去远程参考更新snapshot包 例如 mvn i