首页
所有分类
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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
jquery JSON的解析方式
Jul 25 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
javascript实现滚动条效果
Mar 24 Javascript
微信小程序自定义底部弹出框功能
Nov 18 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
html标准库(1) ctypes(1) dll(1) 历史记录(1) 遍历文件夹(1) C/C++(1) 公共键(1) python-pcl(1) 有序排列(1) Anaconda(2)
You might like
PHP 基本语法格式
2009/12/15 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python与Redis的连接教程
2015/04/22 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
浅述python中深浅拷贝原理
2018/09/18 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python实现支付宝转账接口
2019/05/07 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
详解python polyscope库的安装和例程
2020/11/13 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
Troy-Bilt官网：草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
台湾时尚彩瞳专门店：imeime
2019/08/16 全球购物
校园文明倡议书
2014/05/16 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android