快捷導(dǎo)航

DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展

更新時(shí)間：2016年06月22日 11:27:33 作者：紫菜中毒

這篇文章主要介紹了DIV+CSS+jQ實(shí)現(xiàn)省市聯(lián)動(dòng)可擴(kuò)展方法的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

公司的省市縣數(shù)據(jù)比較坑爹，是通過ehr系統(tǒng)那邊生成ID來匹配，比如福建省對應(yīng)ID 01211014AOP145，城市也對應(yīng)一個(gè)ID，然后區(qū)縣就不管了。然后我就網(wǎng)上找了一堆資源插件什么的感覺都不適用就決定自己寫一個(gè)。因?yàn)樽约阂彩前胪八哪欠N界面都不知道怎么弄，弄哪種格式，什么風(fēng)格，配色啊。就默默的找了京東、亞馬遜、淘寶、當(dāng)當(dāng)?shù)人麄冴P(guān)于省市區(qū)是怎么做的。圖如下：

最后我結(jié)合一下做了如下圖：

廢話不多說上源碼：

<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>省市二級聯(lián)動(dòng)可擴(kuò)展性</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" />國內(nèi) 
<input type="radio" name="radio1" value="2" />國外<br /><br /> 
<label>查詢省市聯(lián)動(dòng)：</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(); 
//國外點(diǎn)擊無效 
if (index == 2) { 
return false; 
} 
$(this).addClass("liDefault").siblings().removeClass("liDefault"); 
$('#divProCity').children('div').eq(index).show().siblings('div').hide(); 
}); 
}) 
//選擇國內(nèi)國外 
$("[name$=radio1]").click(function () { 
var value = $(this).val(); 
//更改國外國內(nèi)時(shí)重置省市的值為空，圖標(biāo)還原,關(guān)閉彈層,判斷輸入框是否可以編輯 
$("input[id*=txt_proCity]").val(''); 
$('#btnImg').attr("class", "btn_img1"); 
$('#btnImg').attr("name", "img1"); //給切換圖片做標(biāo)記的 
$('#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"); //給切換圖片做標(biāo)記的 
//模糊查詢相關(guān)代碼 
var ss = "<ul><li>福州福州</li><li>福州福州</li><li>福福州州</li><li>福州福州</li></ul>"; 
$('.liDiv3').html(''); 
$('.liDiv3').html(ss); 
} 
//根據(jù)國內(nèi)國外 點(diǎn)擊右邊按鈕加載 
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國內(nèi) 2國外 控制面板菜單項(xiàng)顯示 
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>

邏輯就是要先選國內(nèi)或者國外，三角形就是圖片，不是h5 canvas畫出來的，這種圖片網(wǎng)上多的是。

1、我用input 類型button 作為圖片容器，用img圖片居然出不來（可能我水吧）。input有默認(rèn)樣式按鈕點(diǎn)擊外面有藍(lán)色的邊框，要去掉outline:none;不要像我一樣寫成out-line

2、感覺自己在寫面向過程一樣，按三角形加載全部信息，切換圖片，再點(diǎn)圖片就關(guān)閉成。里面有些邏輯就是自由擴(kuò)展，不要國外的就把國外有關(guān)代碼刪掉，要擴(kuò)展就添加類似省市。

3、動(dòng)態(tài)加載數(shù)據(jù)就是比如省份對應(yīng)的div 類名為liDiv1,它的盒子結(jié)構(gòu)

<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);

動(dòng)態(tài)數(shù)據(jù) ss 可以通過ajax獲取數(shù)據(jù)庫數(shù)據(jù) 經(jīng)過后臺(tái)遍歷拼接

var ss= <ul><li id="01211014AOP145" onclick="getLi(this)" >福建省</li></ul>

比如說以下是 .net 的寫法（寫的比較low不要介意）把他傳到前端 ajax接收返回的值，直接append到$('.liDiv3').html(ss);就獲取到動(dòng)態(tài)數(shù)據(jù)

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>"); 
}

獲取數(shù)據(jù)，點(diǎn)擊福建省就可以寫通用的click事件，后臺(tái)拼接的onclick="getLi(this)"

在前端就寫上

function getLi(obj){ 
var id=$(obj).attr("id"); 
var text=$(obj).text(); 
//可以通過省份id 寫ajax去獲取市的數(shù)據(jù) 
}

然后這樣就獲取到省份的 text id ，通過click事件可以獲取到城市的數(shù)據(jù) 同樣加載 id和text。在拼接文本到最上面的輸入框就是最終結(jié)果（這個(gè)還沒寫，很簡單，懶癌發(fā)作了不想寫了），對了上面的文本已經(jīng)設(shè)置了只讀readonly，說到只讀就要說到 readonly 和disabled 的區(qū)別了，readonly只對輸入框還有多文本輸入框有效，而且文本樣式不會(huì)更改。disabled 基本試用與所有元素，但是要注意的它的兼容性。上面的文本框設(shè)置了runat屬性是為了方便.net后臺(tái)直接讀取數(shù)據(jù)。

您可能感興趣的文章: