js二级联动
<body>
<section>
<a>省份</a>
<select id="province">
<option value="0">--请选择--</option>
<option value="1">山东</option> //通过不同的value来区分不同的省份
<option value="2">山西</option>
</select>
<a>城市</a>
<select id="city">
<option>--请选择--</option>
</select>
</section>
</body>
<script>
var arr = new Array();
arr[1] = ["莱芜","济南","东营"];
arr[2] = ["长治","太原","壶关"];
var provinceInput = document.getElementById("province"); //获取省份
var cityInput = document.getElementById("city"); //获取市
provinceInput.onchange = function () {
cityInput.options.length = 1;//当省改变的时候让市的长度为1
for(var i = 0;i < arr[provinceInput.value].length;i++) {
cityInput.add(new Option(arr[provinceInput.value][i])); //向市里面添加对应的数组元素
}
}
</script>
js二级联动的更多相关文章
- 原生js二级联动
今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...
- Ext.js二级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...
- js 二级联动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- xml+js+html的二级联动
首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- JS实现下拉单的二级联动
因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
- js：二级联动示例
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- js小例子之二级联动
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
随机推荐
- perl模块安装——cpanm
下载 wget http://xrl.us/cpanm mv cpanm.1 cpanm 配置 在bashrc或zshrc里面加入下面的几句话 最好把相对路径改成绝度路径(将~换成你根目录的绝对路径 ...
- javascript-删除节点
任务目的: 每点击一下按钮删除一个标签. 掌握到了: 这里是主要学习到了parentNote以及removeChild两个DOM属性. parentNote:parent英译为父亲,Note英译为节点 ...
- 【C#/WPF】UI控件的拖拽/拉伸
需求①:控件拖拽——按住鼠标,可自由拖拽控件. 方法:目前看到的办法有两种. 使用ZoomableCanvas:http://www.cnblogs.com/gnielee/archive/2011/ ...
- vue点击返回顶部插件vue-totop
vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...
- 用STS创建Maven的Web项目<转>
右键New——>other——>Maven——>Maven Project 弹出框中点击Next,在Filter中写上:webapp. 然后在下面的框中选择org.apache.ma ...
- FastCGI 进程管理器（FPM）
FPM(FastCGI 进程管理器)用于替换 PHP FastCGI 的大部分附加功能,对于高负载网站是非常有用的. 它的功能包括: 支持平滑停止/启动的高级进程管理功能: 可以工作于不同的 uid/ ...
- (五)Qt实现自定义模型基于QAbstractItemModel
一个小例子 QTableView + QStandardItemModel QStandardItemModel model; //设置大小 model.setColumnCount(); //列 m ...
- e595. Drawing an Image
See also e575 The Quintessential Drawing Program and e594 Reading an Image or Icon from a File. publ ...
- 下列没有直接采用XML技术的是（ ）
A. UDDI B. SOAP C. AJAX D.DCOM 解答:D DCOM(分布式组件对象模型,分布式组件对象模式)是一系列微软的概念和程序接口,利用这个接口,客户端程序对象能够请求来自网络中另 ...
- nodejs基础 -- NPM 使用介绍
npm:是nodejs的包管理工具,随NodeJS一起安装的,能解决NodeJS代码部署上的很多问题,如: 1.允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2.允许用户从NPM服务器下载 ...