DIV+CSS+jQ实现省市联动可扩展_Javascript教程-查字典教程网

摘要：公司的省市县数据比较坑爹，是通过ehr系统那边生成ID来匹配，比如福建省对应ID01211014AOP145，城市也对应一个ID，然后区县就...

公司的省市县数据比较坑爹，是通过ehr系统那边生成ID来匹配，比如福建省对应ID 01211014AOP145，城市也对应一个ID，然后区县就不管了。然后我就网上找了一堆资源插件什么的感觉都不适用就决定自己写一个。因为自己也是半桶水的那种界面都不知道怎么弄，弄哪种格式，什么风格，配色啊。就默默的找了京东、亚马逊、淘宝、当当等他们关于省市区是怎么做的。图如下：

DIV+CSS+jQ实现省市联动可扩展1

DIV+CSS+jQ实现省市联动可扩展2

DIV+CSS+jQ实现省市联动可扩展3

DIV+CSS+jQ实现省市联动可扩展4

DIV+CSS+jQ实现省市联动可扩展5

最后我结合一下做了如下图：

DIV+CSS+jQ实现省市联动可扩展6

废话不多说上源码：

页面布局：

<head> <title>省市二级联动可扩展性</title> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <label>选择是否出国：</label> <input type="radio" name="radio1" value="1" />国内 <input type="radio" name="radio1" value="2" />国外<br /><br /> <label>查询省市联动：</label> <input type="text" id="txt_proCity" onkeyup="GetOutCounty()" readonly="readonly" runat="server" /> <input type="button" id="btnImg" name="img1" /><br /> <label>显示位置：</label><br /> <div id="divProCity"> <ul> <li>省份</li> <li>城市</li> [html] view plain copy <li>国外</li> </ul> <div> <ul> <li>福州福州</li> <li>福州福州</li> <li>福福州州</li> <li>福州福州</li> <li>福福州州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> <li>福建</li> <li>安徽</li> <li>福州</li> <li>福州</li> <li>福州</li> </ul> </div> <div> <p><strong>请先选择省份！</strong></p> </div>

脚本：

逻辑就是要先选国内或者国外，三角形就是图片，不是h5 canvas画出来的，这种图片网上多的是。

1、我用input 类型button 作为图片容器，用img图片居然出不来（可能我水吧）。input有默认样式按钮点击外面有蓝色的边框，要去掉outline:none;不要像我一样写成out-line

2、感觉自己在写面向过程一样，按三角形加载全部信息，切换图片，再点图片就关闭成。里面有些逻辑就是自由扩展，不要国外的就把国外有关代码删掉，要扩展就添加类似省市。

3、动态加载数据就是比如省份对应的div 类名为liDiv1,它的盒子结构

<div<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>"; $('.liDiv3').html(''); //添加前先清空 $('.liDiv3').html(ss);

动态数据 ss 可以通过ajax获取数据库数据经过后台遍历拼接

var ss= <ul><li id="01211014AOP145" >福建省</li></ul>

比如说以下是 .net 的写法（写的比较low不要介意）把他传到前端 ajax接收返回的值，直接append到$('.liDiv3').html(ss);就获取到动态数据

if (ds != null && ds.Tables.Count > 0 && ds.Tables[0].Rows.Count > 0) { strBuild.Append("<table id="tableShow" cellspacing='0' >"); //strBuild.AppendFormat("<tr><div>" + title3+ "</div><tr>"); foreach (DataRow dr in ds.Tables[0].Rows) { strBuild.Append("<tr id='" + dr["VALUE"] + "' onmouseover="this.bgColor='#FAEBD7'" onmouseout="this.bgColor=''" onclick="ClickOnWorkPlace(this)" >"); strBuild.AppendFormat("<td >{0}</td>", dr["name"].ToString()); strBuild.Append("</tr>"); } strBuild.Append("</table>"); }

获取数据，点击福建省就可以写通用的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后台直接读取数据。