首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 22, 2016

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

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

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

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

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

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

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

废话不多说上源码：

<style type="text/css"> 
#divProCity 
{ 
position:absolute; 
width:350px; 
max-height:220px; 
height:auto; 
display:none; 
border:1px solid #d3d3d3; 
z-index:100; 
overflow:auto; 
overflow-x:hidden; 
} 
.headMenu 
{ 
height: 34px; 
background: #f6f6f6; 
margin: 0; 
padding: 0; 
} 
.headMenu li 
{ 
float:left; 
text-align:center; 
width:60px; 
height: 32px; 
list-style:none; 
background: #f6f6f6; 
line-height: 32px; 
font-size: 13px; 
cursor: pointer; 
} 
.headMenu li.liDefault 
{ 
background: #F60; 
color: #fff; 
margin: 0; 
padding: 0; 
} 
.liDiv1, .liDiv2 
{ 
height: auto; 
min-height:30px; 
border-top: 2.5px solid #F60; 
margin-top: -2px; 
} 
.liDiv3 
{ 
height:auto; 
min-height:30px; 
max-height:200px; 
border-top: 2px solid #F60; 
margin-top: -2px; 
} 
.liDiv2,.liDiv3 
{ 
display: none; 
} 
.liDiv1 ul, .liDiv2 ul 
{ 
padding: 2px; 
margin: 0; 
clear:both; 
} 
.liDiv3 ul 
{ 
padding: 2px; 
margin: 0; 
clear:both; 
} 
.liDiv1 ul li, .liDiv2 ul li 
{ 
float:left; 
font-size: 14px; 
width:60px; 
line-height:180%; 
list-style:none; 
color: #252525; 
margin: 0 4px; 
cursor:pointer; 
text-align:center; 
} 
.liDiv3 ul li 
{ 
float:left; 
font-size: 13px; 
line-height: 150%; 
color: #252525; 
margin: 1px 3px; 
list-style: none; 
cursor:pointer; 
text-align:center; 
} 
.liDiv1 ul li:hover, .liDiv2 ul li:hover,.liDiv3 ul li:hover 
{ 
color: #8b51cb; 
cursor: pointer; 
text-decoration: none; 
padding: 0; 
background:#ccc; 
} 
.btn_img1 
{ 
width:20px; 
vertical-align:middle; 
margin-left:-31px; 
border:none; 
outline:none; 
height:10px; 
cursor:pointer; 
background:url(images/img_1.png) no-repeat center center; 
z-index:10; 
} 
.btn_img2 
{ 
margin-left:-31px; 
margin-bottom:2px; 
width:20px; 
height:10px; 
border:none; 
outline:none; 
vertical-align:middle; 
cursor:pointer; 
background:url(images/img_2.png) no-repeat center center; 
z-index:10; 
} 
</style>

页面布局：

<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" class="btn_img1" name="img1" onclick="changeImg()" /><br /> 
<label>显示位置：</label><br /> 
<div id="divProCity"> 
<ul class="headMenu"> 
<li class="liDefault">省份</li> 
<li>城市</li> 
[html] view plain copy
<li>国外</li> 
</ul> 
<div class="liDiv1"> 
<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 class="liDiv2"> 
<p style="text-align:center;color:#F60"><strong>请先选择省份！</strong></p> 
</div>

脚本：

<script type="text/javascript"> 
$(document).ready(function () { 
$('#divProCity ul.headMenu li').click(function () { 
var index = $(this).index(); 
//国外点击无效 
if (index == 2) { 
return false; 
} 
$(this).addClass("liDefault").siblings().removeClass("liDefault"); 
$('#divProCity').children('div').eq(index).show().siblings('div').hide(); 
}); 
}) 
//选择国内国外 
$("[name$=radio1]").click(function () { 
var value = $(this).val(); 
//更改国外国内时重置省市的值为空，图标还原,关闭弹层,判断输入框是否可以编辑 
$("input[id*=txt_proCity]").val(''); 
$('#btnImg').attr("class", "btn_img1"); 
$('#btnImg').attr("name", "img1"); //给切换图片做标记的 
$('#divProCity').css("display", "none"); 
if (value == 2) {//国外 
$('#txt_proCity').removeAttr("readonly"); 
} 
else { 
$('#txt_proCity').attr("readonly", "readonly"); 
} 
}) 
//出国模糊查询 
function GetOutCounty() { 
//border: 1px solid #d3d3d3;background: #f6f6f6;备用颜色background: #f7f7f7; 
var txt = $("input[id*=txt_proCity]"); 
if (txt.val().trim()== "") { 
return false; 
} 
var height = txt.height(); 
var x = txt.offset().top; 
var y = txt.offset().left; 
$('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" }); 
$('#divProCity ul.headMenu li').eq(2).show().css("width", "70px").addClass("liDefault").siblings().hide(); 
$('#divProCity').children('div').eq(2).show().siblings('div').hide(); 
$('#btnImg').attr("class", "btn_img2"); 
$('#btnImg').attr("name", "img2"); //给切换图片做标记的 
//模糊查询相关代码 
var ss = "<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>"; 
$('.liDiv3').html(''); 
$('.liDiv3').html(ss); 
} 
//根据国内国外 点击右边按钮加载 
function changeImg() { 
var _selectValue = $("input:checked[name$=radio1]").val(); 
if (_selectValue == "" || _selectValue==undefined) { 
alert("请先选择是否出国！"); 
return false; 
} 
var txt = $("input[id*=txt_proCity]"); 
var height = txt.height(); 
var x = txt.offset().top; 
var y = txt.offset().left; 
var name = $('#btnImg').attr("name"); 
if (name == "img1") { 
$('#btnImg').attr("class", "btn_img2"); 
$('#btnImg').attr("name", "img2"); 
$('#divProCity').css({ display: "block", left: y + "px", top: x + height + 8 + "px" }); 
//1国内 2国外 控制面板菜单项显示 
if (_selectValue == 1) { 
$('#divProCity ul.headMenu li').eq(2).hide().siblings().show(); 
$('#divProCity').children('div').eq(0).show().siblings('div').hide(); 
} 
else { 
$('#divProCity ul.headMenu li').eq(2).show().css("width","70px").addClass("liDefault").siblings().hide(); 
$('#divProCity').children('div').eq(2).show().siblings('div').hide(); 
} 
} 
else { 
$('#btnImg').attr("class", "btn_img1"); 
$('#btnImg').attr("name", "img1"); 
$('#divProCity').css("display","none"); 
} 
} 
</script>

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

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

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

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

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

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

var ss= <ul><li id="01211014AOP145" onclick="getLi(this)" >福建省</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\" class=\"gridtable\" cellspacing='0' >"); 
//strBuild.AppendFormat("<tr><div class=\"dialogTitle1\">" + 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后台直接读取数据。

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

- Author -

紫菜中毒

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js获取日期：昨天今天和明天、后天
Jun 11 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
Javascript对象字面量的理解
Jun 22 #Javascript
Javascript闭包与函数柯里化浅析
Jun 22 #Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 #Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 #Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 #Javascript
Javascript实现图片不间断滚动的代码
Jun 22 #Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 #Javascript
ftpserver(1) NFS(1) Logrotate(1) BeautifulSoup4(2) ElementTree(1) tfx(1) 黑名单(1) Odoo(1) SeaTunnel(1) tkFileDialog(1)
You might like
星际争霸秘籍
2020/03/04 星际争霸
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php5与php7的区别点总结
2019/10/11 PHP
javascript dom追加内容实现示例
2013/09/21 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
jquery实现数字输入框
2017/02/22 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python实现日志按天分割
2019/07/22 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
简约控的天堂：The Undone
2016/12/21 全球购物
Europcar英国：英国汽车和货车租赁
2017/01/21 全球购物
美国开幕式潮店：Opening Ceremony
2018/02/10 全球购物
xxx同志考察材料
2014/02/07 职场文书
暑期培训班策划方案
2014/08/26 职场文书
2014年医院工作总结
2014/11/20 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
新教师教学工作总结
2015/08/14 职场文书
开学季：喜迎新生，迎新标语少不了
2019/11/07 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
python 网络编程要点总结
2021/06/18 Python
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS