JavaScript 实现省市二级联动
JavaScript 实现省市二级联动
版权声明:未经授权,严禁转载!
案例代码
<style>
.hide {
display: none;
}
</style> <select name="provs">
<option>请选择</option> <!-- 0 -->
<option>北京市</option> <!-- 1 -->
<option>天津市</option> <!-- 2 -->
<option>河北省</option>
</select>
<select name="cities" class="hide"> </select> <script>
/* 实现省市联机操作 */
var cities = [
[{"name": '东城区', "value": 101},//cities[0][0]["name"]
{"name": '西城区', "value": 102},
{"name": '海淀区', "value": 103},
{"name": '朝阳区', "value": 104}],
[{"name": '河东区', "value": 201},
{"name": '河西区', "value": 202},
{"name": '南开区', "value": 303}],
[{"name": '石家庄市', "value": 301},
{"name": '廊坊市', "value": 302},
{"name": '保定市', "value": 303},
{"name": '唐山市', "value": 304},
{"name": '秦皇岛市', "value": 304}]
]; // 触发事件的元素
var selProvs = document.getElementsByName("provs")[0];
var selCts = document.getElementsByName("cities")[0];
// 绑定事件处理函数,当选项发生变化时
selProvs.onchange = function () {
// 获取用户选择 option 所在的下标 selProvs.selectedIndex;
var i = selProvs.selectedIndex;
// console.log(i)
// 判断用户是否未选择的是任何省。
if (i == 0) selCts.className = "hide";
else {
selCts.className = ""; // 显示
selCts.innerHTML = ""; // 清空之前的
// 去数组 cities 中获取 i - 1 对应的子数组
var cts = cities[i - 1];
// 创建文档片段
var frag = document.createDocumentFragment();
// 添加第一个 option 请选择
var option = document.createElement("option");
option.innerHTML = "请选择";
frag.appendChild(option);
// 遍历数组
for (var i = 0; i < cts.length; i++) {
// 创建 option
var option = document.createElement("option");
// 给option添加内容和value
option.innerHTML = cts[i]["name"];
option.value = cts[i]["value"];
// 将 option添加到文档片段
frag.appendChild(option);
}
// 将 文档片段添加到 cities 中
selCts.appendChild(frag); } } </script>
JavaScript 实现省市二级联动的更多相关文章
- 省市二级联动--使用app-jquery-cityselect.js插件
只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...
- jQuery_完成省市二级联动
当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...
- 省市二级联动(原生JS)
代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...
- 微信小程序picker组件 - 省市二级联动
picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- iOS开发之"省市"二级联动的数据组织(PHP版)以及PickerView的实现与封装
之所以要发表这篇博客,还源于最近的开发工作所实现的一个小的Demo, 当然这个Demo不会涉及工作中App的一些内容,下方要实现的Demo是通用的.因为项目需求的迭代,要求在银行卡绑定中添加支行所在的 ...
- javascript 省市二级联动
通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...
- 【原创】省市二级联动纯javascript
// 北京 上海 天津 重庆 河北 山西 内蒙古 辽宁 吉林 黑龙江 江苏 浙江 安徽 福建 江西 山东 河南 湖北 湖南 广东 广西 海南 四川 贵州 云南 西藏 陕西 甘肃 宁夏 青海 新疆 香港 ...
- JavaScript学习——使用JS完成省市二级联动
1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...
随机推荐
- POJ-1414 Life Line (暴力搜索)
Life Line Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 855 Accepted: 623 Description L ...
- ubuntu16.04下安装wps
首先下载安装 下载 wps for linux 在终端用命令安装 sudo dpkg -i wps-office_10.~a21_amd64.deb 字体缺失问题 下载 wps_symbol_font ...
- Oracle安装部署之dbca静默建库和删除库
dbca查看帮助: [oracle@wen ~]$ dbca -help 1).运行静默建库语句 [oracle@wen ~]$ dbca -silent -cloneTemplate -gdbNam ...
- IDEA 配置环境和相关工具整理(新手入门)
转载自:https://blog.csdn.net/moneyshi/article/details/79722360 因项目环境需要,开发工具需要统一 , 项目团队都使用idea,所以不得已自己也配 ...
- JS 防止表单重复提交的方法
第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”JavaScript”"> var checkSubmi ...
- Tomcat的overview界面浅析
Server Locations配置有三个选项(加载位置): 1. Use workspace metadata (does not modify Tomcat installation); 2. U ...
- js-jquery-SweetAlert2【一】使用
概述:SweetAlert2是SweetAlert-js的升级版本,它解决了SweetAlert-js中不能嵌入HTML标签的问题,并对弹出对话框进行了优化,同时提供对各种表单元素的支持,还增加了5种 ...
- Appium-Python-Client安装
官网是这个:https://pypi.org/project/Appium-Python-Client/#files 下载下来后是这样的文件不知道怎么安装: 不用下载,直接这样就可以 了~~ 安装后导 ...
- PHP自定义函数返回多个值
PHP自定义函数只允许用return语句返回一个值,当return执行以后,整个函数的运行就会终止. 有时要求函数返回多个值时,用return是不可以把值一个接一个地输出的. return语句可以返回 ...
- vscode 搭建react-native
vscode 搭建react-native 选择:vscode + typings + eslint * vscode: 宇宙最强IDE家族的最新产品 * typings: 基于typescirpt的 ...