紫菜中毒 通过本文主要向大家介绍了div和css和jq省市联动等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
公司的省市县数据比较坑爹，是通过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).sh