jquery书写一个简易的二级联动
2024-09-24 04:44:21
先用php生成一个json数组示例如下
JSON_UNESCAPED_UNICODE 是对汉字进行处理的参数
然后HTML代码如下 把那个json_city赋值成我们用php生成的json即可
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<div>
<table>
<tr>
<td>省份城市</td>
<td>
<select name="province" id="province">
<option value="">请选择省份</option>
</select>
<select name="city" id="city">
<option value="">请选择城市</option>
</select>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(function(){
//页面加载完毕后开始执行的事件
var city_json='{"江苏":["南京","常州"],"河南":["南阳","安阳"]}';
var city_obj=eval('('+city_json+')');
for (var key in city_obj)
{
$("#province").append("<option value='"+key+"'>"+key+"</option>");
}
$("#province").change(function(){
var now_province=$(this).val();
$("#city").html('<option value="">请选择城市</option>');
for(var k in city_obj[now_province])
{
var now_city=city_obj[now_province][k];
$("#city").append('<option value="'+now_city+'">'+now_city+'</option>');
}
});
});
</script>
</body>
</html>
效果如下
最新文章
- shell-for循环
- linux--杂记(rework)
- Android性能优化之运算篇
- MSCRM 2011/2013 单点登录 实现
- Android开源项目发现----其他特殊效果篇(持续更新)
- linux伪文件与proc文件
- C# base和this[转]
- 面向对象程序设计-C++ Type conversion (Static) &; Inheritance &; Composition【第十二次上课笔记】
- js深入理解构造函数和原型对象
- 【BZOj 3670】【UOJ #5】【NOI 2014】动物园
- CoreAnimation动画结构变量
- 当今商业中使用的三种十分重要的IT应用系统
- CentOS 配置防火墙操作实例
- 学习笔记----php环境配置
- Spring Boot搭建Web项目常用功能
- lapis 项目添加prometheus 监控集成grafana
- ASP.NET 之 EntityFramework实体框架搭建
- jquery validate 增加过滤特殊字符的方法
- Spring中的Bean配置方式
- 证明SG中梯度的期望等于GD的梯度
热门文章
- 使用万网+阿里云服务器(Apache)配置二级域名
- Android Context原理与使用的总结
- Jquery使容器自适应浏览器窗口
- Atitit. Gui控件and面板----程序快速启动区--最佳实践Launchy ObjectDock-o0g
- iOS第三方开源库的吐槽和备忘
- 使用c++的cocos2d-x-3.0rc1程序公布apk
- 线程相关函数(4)-pthread_mutex_lock(), pthread_mutex_unlock() 互斥锁
- UltraISO制作启动盘及提取U盘为ISO镜像
- Hystrix的用法
- Git出现error: Your local changes to the following files would be overwritten by merge: ... Please, commit your changes or stash them before you can merge.的问题解决(Git代码冲突)