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形式保存,以便读取 ...
随机推荐
- 关于Unity树形插件Tree View Control的相关搜集
博客http://blog.csdn.net/qq_15267341/article/details/51997926 的这个 Script Based Runtime Tree-Vie ...
- [systemd]How To Use Systemctl to Manage Systemd Services and Units
转自: https://www.digitalocean.com/community/tutorials/how-to-use-systemctl-to-manage-systemd-services ...
- 碰到故障大全---cd
office已安装32位,无法安装64位?解决方案:开始→运行→输入regedit,打开注册表编辑器,找到HKEY_CLASSES_ROOT\\Installer\\Products\ \000021 ...
- Window 2008 R2组策略之一——组策略管理控制台
组策略管理在windows域管理中占有重要地位,本身也不是新的内容了.但微软在Windows2008中终于集成了一个非常好用的组策略管理工具——组策略管理控制台.并且为原有的组策略添加了新的元素.本文 ...
- 一站式学习Wireshark(一):Wireshark基本用法
按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接 ...
- oozie中调度mapreduce
mapreduce可以直接对hdfs进行清洗和计算,这里介绍oozie中如何调度使用. 操作步骤如下: 1. 写一个mapper和reduce类,并且打包成jar包 2. 在workflow中引用ma ...
- 当数据库的字段为date类型时候
当数据库的字段为date类型时候: //--------------------------------------------------数据库设计------------------------- ...
- [oracle] 重要服务启动与停止命令行
① 控制台服务[em control] 启动:emctl start dbconsole 停止:emctl stop dbconsole ② 监听器服务[listener control] 启动:ls ...
- android 内存管理机制、异常、垃圾回收
当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能够在第一时间得到响应. 当系统内存不足时,系统将激活内存 ...
- C++ 中的空格
C++ 中的空格只包含空格的行,被称为空白行,可能带有注释,C++ 编译器会完全忽略它. 在 C++ 中,空格用于描述空白符.制表符.换行符和注释.空格分隔语句的各个部分,让编译器能识别语句中的某个元 ...