js省市级联实现
js省市级联实现。
for [element] in [collection] 用于循环下标,常用于json for(index in arr){
console.info("下标:"+index+"值:"+arr[index]);
} =====================分割线========================
<html>
<head>
<meta charset="UTF-8">
<title>基于JSON级联列表</title>
<script type="text/javascript">
//JSON:主要用于数据交换,其次json就是有格式的字符串
//var str = "{'name':'demo','age':'18'}";
//这样写符合JSON语法(字符串用双引号)
var str = '{"name":"demo","age":"18"}';
console.info("当前类型为:"+typeof(str));
var obj = JSON.parse(str);
console.info("当前类型为:"+typeof(obj));
//JSON输出访问的两种方式
console.info(obj.name+","+obj.age+"||"+obj['name']+","+obj['age']);
str=JSON.stringify(obj);
console.info("当前类型为:"+typeof(str)); //采用JSON格式来存储相应的数据和编码
var proJSON = {"1":"广东省","2":"湖北省"};
var cityJSON = {"1":{"020":"广州","0755":"深圳","0756","珠海"},"2":{"027":"武汉","0710":"襄樊","0715":"赤壁"}} window.onload=function(){
var province = document.getElementById("province");
for(var temp in proJSOM){
province.add(new Option(proJSON[temp],temp));
}
} function setCity(){
//只要触发了此事件,则二级菜单必须还原
var city=document.getElementById('city');
city.Option.length=1;
//获取被选中省会的值
var val = document.getElementById('province').value;
console.info("cityJSON:"+cityJSON[val]);
if(!cityJSON[val]){
return;
}
//通过选中的值获取二级菜单的json数据
var sonJSON=cityJSON[val];
for(temp in sonJSON){
city.add(new Option(sonJSON[temp],temp))
} } </script>
</head> <body>
<!--数据的三种存储方式:
1:数据库
2:properties:存储非敏感数据,且key value 格式,省资源
3:XML:存储非敏感数据,且支持有结构 目前一般用于配置文件
4:硬编码:主要存储非敏感数据,且不改变的数据
-->
<select id="province" onChange="setCity()">
<option>--选择省会--</option>
</select>
<select id="city" >
<option>--选择城市--</option>
</select>
</body>
</html> =====================分割线======================== <html>
<head>
<meta charset="UTF-8">
<title>基于数组级联列表</title>
<script type="text/javascript">
//js中数组的下标支持中文
var arr = new Array();
arr['广东省'] = ['广州','深圳','珠海'];
arr['湖北省'] = ['武汉','襄樊','赤壁'];
window.onload=function(){
//向省会赋值下拉列表框
var proSel = document.getElementById("province");
for(var temp in arr){
proSel.add(new Option(temp,temp))
}
} function setCity(){
//清空当前下拉列表框的信息
var citySel = document.getElementById("city");
citySel.options.length=1;
//获取选中的省会信息
var pro = document.getElementById('province').value;
//如果选择获取提示信息则不执行
if(pro == ""){
return;
}
var citySel = document.getElementById('city');
for(var i=0;i<arr[pro].length;i++){
citySel.add(new Option(arr[pro][i],arr[pro][i]))
}
}
</script>
</head> <body>
<select id="province" onChange="setCity()">
<option>--选择省会--</option>
</select>
<select id="city" >
<option>--选择城市--</option>
</select>
</body>
</html>
js省市级联实现的更多相关文章
- 纯js实现省市级联效果
我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...
- Ajax异步刷新省市级联
省市级联在web前端用户注册使用非常广泛.Ajax异步刷新省市级联.如图:选择不同的区,自动加载相应的街. <TD class=field>位 置:</TD> <TD&g ...
- JavaScript 省市级联效果
JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 省市级联.net
初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...
- JS动态级联菜单
JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...
- JavaScript实现省市级联效果实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
- javascript中的省市级联效果
学习javascript的时候都遇到过这样的需求,不仅是省市,还有其他的一些场景,看看关键的代码有哪些吧. <head runat="server"> <titl ...
- 全国省市级联数据sql语句 mysql版
全国省市级联数据sql语句 mysql版 --省级 provincial create table provincial ( provincialID int, provincialName ), p ...
随机推荐
- BFC特性 形成BFC
1.示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- Webwork【02】前端OGNL试练
1.OGNL 出现的意义 在mvc中,数据是在各个层次之间进行流转是一个不争的事实.而这种流转,也就会面临一些困境,这些困境,是由于数据在不同世界中的表现形式不同而造成的: a. 数据在页面上是一个扁 ...
- ES6学习笔记六:迭代
一:迭代器 它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员). ES6创造了一种新的遍历命令for. ...
- docker-machine为节点安装指定版本的docker-ce的思路
对于指定版本的问题,翻遍官网文档和github上的issue,始终没有一个好的回答,而且该产品的开发人员不知道为什么总不正面提供方法,也许是为了推广新版本, 但是这样真的好吗?docker swarm ...
- 基于源码编译openssl
openssh依赖于openssl,由于ssl频繁曝出漏洞,牵扯到openssh.而自身也存在漏洞... 00.下载openssl https://www.openssl.org/source/ ht ...
- spring下Junit_jdbc回滚demo
配置测试类 添加如下内容在class前,用于配置applicationContext.xml文件的位置. @RunWith(SpringJUnit4ClassRunner.class) @Contex ...
- [转]图解分布式一致性协议Paxos
Paxos协议/算法是分布式系统中比较重要的协议,它有多重要呢? <分布式系统的事务处理>: Google Chubby的作者MikeBurrows说过这个世界上只有一种一致性算法,那就是 ...
- Alamofire使用报错Extra argument 'method' in call解决办法
使用Alamofire的时候,在用这句的时候报错了: Extra argument 'method' in call Alamofire.request("", method: H ...
- 【LeetCode】Longest Substring with At Most Two Distinct Characters (2 solutions)
Longest Substring with At Most Two Distinct Characters Given a string, find the length of the longes ...
- java restful接口
用json-lib的jar包输出json串: public void responseJason(HttpServletResponse response, Object obj){ ObjectMa ...