公司的省市县数据比较坑爹,是通过ehr系统那边生成ID来匹配,比如福建省 对应ID 01211014AOP145,城市也对应一个ID,然后区县就不管了。然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个。因为自己也是半桶水的那种界面都不知道怎么弄,弄哪种格式,什么风格,配色埃就默默的找了京东、亚马逊、淘宝、当当等他们关于省市区是怎么做的。图如下:
最后我结合一下做了如下图:
废话不多说上源码:
页面布局:
省市二级联动可扩展性 国内 国外
- 省份
- 城市
[html] view plain copy- 国外
- 福州福州
- 福州福州
- 福福州州
- 福州福州
- 福福州州
- 福建
- 安徽
- 福州
- 福州
- 福州
- 福建
- 安徽
- 福州
- 福州
- 福州
- 福建
- 安徽
- 福州
- 福州
- 福州
- 福建
- 安徽
- 福州
- 福州
- 福州
- 福建
- 安徽
- 福州
- 福州
- 福州
- 福建
- 安徽
- 福州
- 福州
- 福州
请先选择省份!
脚本:
逻辑就是要先选国内或者国外,三角形就是图片,不是h5 canvas画出来的,这种图片网上多的是。
1、我用input 类型button 作为图片容器,用img图片居然出不来(可能我水吧)。input有默认样式按钮点击外面有蓝色的边框,要去掉outline:none;不要像我一样写成out-line
2、感觉自己在写面向过程一样,按三角形加载全部信息,切换图片,再点图片就关闭成。里面有些逻辑就是自由扩展,不要国外的就把国外有关代码删掉,要扩展就添加类似 省 市。
3、动态加载数据就是 比如 省份 对应的div 类名为liDiv1,它的盒子结构
福州福州 福州福州 福福州州 福州福州 "; $('.liDiv3').html(''); //添加前先清空 $('.liDiv3').html(ss);动态数据 ss 可以通过ajax获取数据库数据 经过后台遍历拼接
var ss=
- 福建省
比如说以下是 .net 的写法(写的比较low不要介意)把他传到前端 ajax接收返回的值,直接append到$('.liDiv3').html(ss);就获取到动态数据
if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) { strBuild.Append(""); //strBuild.AppendFormat("
"); } " + title3+ ""); foreach (DataRow dr in ds.Tables[0].Rows) { strBuild.Append(" "); strBuild.AppendFormat(" "); } strBuild.Append("{0} ", dr["name"].ToString()); strBuild.Append("获取数据,点击福建省 就可以写通用的click事件,后台拼接的onclick="getLi(this)"
在前端就写上
function getLi(obj){ var id=$(obj).attr("id"); var text=$(obj).text(); //可以通过省份id 写ajax去获取市的数据 }然后这样就获取到省份的 text id ,通过click事件可以获取到 城市的数据 同样加载 id和text。在拼接文本到 最上面的输入框就是最终结果 (这个还没写,很简单,懒癌发作了不想写了),对了上面的文本已经设置了只读readonly,说到只读 就要说到 readonly 和disabled 的区别了,readonly只对 输入框还有多文本输入框有效,而且文本样式不会更改。disabled 基本试用与所有元素,但是要注意的它的兼容性。上面的文本框设置了runat属性 是为了方便.net后台直接读取数据。
相关推荐
- 4555555555555555454
- aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
- make_sock: could not bind to address 0.0.0.0:443
- 用软件lm_sensors监测Linux系统和CPU温度
- 教你SQLSERVER扩展存储过程XP_CMDSHELL的简单应用
- 教你如何用ISAPI_Rewrite做IIS防盗链
- 桌面文件丢失怎么办?找回桌面文件的妙招
- 电脑中如何将耳机和扬声器设为独立音源
- ubuntu下删除或卸载easy_install所安装的软件包
- Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享
- 如何使用命令查看电脑生产日期
- windows扬声器被禁用了怎么办
- Vsftpd+tcp_wrappers控制主机和用户访问
- Centos 6.5 x86_64 安装或者设置花生壳ddns的技巧
- e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗
- e_s0hic1.exe是什么进程 e_s0hic1进程安全吗
- vi_grm.exe进程是什么意思
- Windows7/2008中批量删除隧道适配器的方法
- 走进Vista系统安全中心!
- 让Vista响应更快