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

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


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

废话不多说上源码:

<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后台直接读取数据。

(0)

相关推荐

  • 基于jquery实现省市联动特效

    本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入jquery --> <script src="http://lib.si

  • Jquery实现仿京东商城省市联动菜单

    本文实例讲述了Jquery实现仿京东商城省市联动菜单的简单实例代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href=&q

  • 基于jquery实现省市联动效果

    由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

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

    公司的省市县数据比较坑爹,是通过ehr系统那边生成ID来匹配,比如福建省 对应ID 01211014AOP145,城市也对应一个ID,然后区县就不管了.然后我就网上找了一堆资源 插件什么的感觉都不适用就决定自己写一个.因为自己也是半桶水的那种界面都不知道怎么弄,弄哪种格式,什么风格,配色啊.就默默的找了京东.亚马逊.淘宝.当当等他们关于省市区是怎么做的.图如下: 最后我结合一下做了如下图: 废话不多说上源码: <style type="text/css"> #divProC

  • JS轻松实现CSS设置,DIV+CSS常用CSS设置

    早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm,写了一大堆的代码,靠,现在派不上用场,小鸽子写了一个更好的样式生成器,适合DIV+CSS架构的网页.(在网吧做网页的朋友,可以使用这个呀!)将常用的样式写了出来,做成DW的扩展插件多好,麻烦高手把他做成DW的扩展插件:小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子] ▒ 恋婷DIV+CSS编辑器 beta1.0 var sIni

  • 省市联动效果的简单实现代码(推荐)

    下拉框二级联动效果在日常应用场景中经常会碰到,尤其是涉及地区.品种等有多级选项时.例如:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • 基于JS实现省市联动效果代码分享

    在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区.品种等有多级选项时.比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • DIV+CSS经常用到的属性、参数及说明

    通用类 overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 !important 指定样式规则的应用优先权 文字类 color: #FF0000;文字颜色 font-family: "Arial", "Helvetica", "sans-serif";字体 font-size: 9px;字号 text-align:center; 居中(left为居左,right为居右) line-height:28px:行高(可用150%

  • jQuery实现的省市联动菜单功能示例【测试可用】

    本文实例讲述了jQuery实现的省市联动菜单功能.分享给大家供大家参考,具体如下: 主要通过 select 下的 option 的 change 事件动态的为市级菜单添加数据. index.html: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript&q

  • JavaScript实现省市联动效果

    本文实例为大家分享了JavaScript实现省市联动的具体代码,供大家参考,具体内容如下 实现效果: 1.当点击文字时选中对应的下拉菜单 2.选择省,后面跟本省对应的市 实现过程: 1.获得省的Dom对象 2.用循环为省的下拉菜单设置option子节点,并将数组每个pName的值赋给创建的子节点 3.每次循环同时为option子节点设置value属性 4.同理在点击省的同时,为市创建option子节点,并将cName的值赋给子节点,设置属性 实现细节: 1. 点击省时采用onchange事件(元

随机推荐