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ù)比較坑爹，是通過(guò)ehr系統(tǒng)那邊生成ID來(lái)匹配，比如福建省 對(duì)應(yīng)ID 01211014AOP145，城市也對(duì)應(yīng)一個(gè)ID，然后區(qū)縣就不管了。然后我就網(wǎng)上找了一堆資源 插件什么的感覺(jué)都不適用就決定自己寫(xiě)一個(gè)。因?yàn)樽约阂彩前胪八哪欠N界面都不知道怎么弄，弄哪種格式，什么風(fēng)格，配色啊。就默默的找了京東、亞馬遜、淘寶、當(dāng)當(dāng)?shù)人麄冴P(guān)于省市區(qū)是怎么做的。圖如下：
最后我結(jié)合一下做了如下圖：
廢話不多說(shuō)上源碼：
<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>
頁(yè)面布局：
<head> <title>省市二級(jí)聯(lián)動(dòng)可擴(kuò)展性</title> <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script> </head> <body> <label>選擇是否出國(guó)：</label> <input type="radio" name="radio1" value="1" />國(guó)內(nèi) <input type="radio" name="radio1" value="2" />國(guó)外<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>國(guó)外</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>請(qǐng)先選擇省份！</strong></p> </div>
腳本：
<script type="text/javascript">
$(document).ready(function () {
$('#divProCity ul.headMenu li').click(function () {
var index = $(this).index();
//國(guó)外點(diǎn)擊無(wú)效
if (index == 2) {
return false;
}
$(this).addClass("liDefault").siblings().removeClass("liDefault");
$('#divProCity').children('div').eq(index).show().siblings('div').hide();
});
})
//選擇國(guó)內(nèi)國(guó)外
$("[name$=radio1]").click(function () {
var value = $(this).val();
//更改國(guó)外國(guó)內(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) {//國(guó)外
$('#txt_proCity').removeAttr("readonly");
}
else {
$('#txt_proCity').attr("readonly", "readonly");
}
})
//出國(guó)模糊查詢
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ù)國(guó)內(nèi)國(guó)外 點(diǎn)擊右邊按鈕加載
function changeImg() {
var _selectValue = $("input:checked[name$=radio1]").val();
if (_selectValue == "" || _selectValue==undefined) {
alert("請(qǐng)先選擇是否出國(guó)！");
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國(guó)內(nèi) 2國(guó)外 控制面板菜單項(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>
邏輯就是要先選國(guó)內(nèi)或者國(guó)外，三角形就是圖片，不是h5 canvas畫(huà)出來(lái)的，這種圖片網(wǎng)上多的是。
1、我用input 類型button 作為圖片容器，用img圖片居然出不來(lái)（可能我水吧）。input有默認(rèn)樣式按鈕點(diǎn)擊外面有藍(lán)色的邊框，要去掉outline:none;不要像我一樣寫(xiě)成out-line
2、感覺(jué)自己在寫(xiě)面向過(guò)程一樣，按三角形加載全部信息，切換圖片，再點(diǎn)圖片就關(guān)閉成。里面有些邏輯就是自由擴(kuò)展，不要國(guó)外的就把國(guó)外有關(guān)代碼刪掉，要擴(kuò)展就添加類似 省 市。
3、動(dòng)態(tài)加載數(shù)據(jù)就是 比如 省份 對(duì)應(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 可以通過(guò)ajax獲取數(shù)據(jù)庫(kù)數(shù)據(jù) 經(jīng)過(guò)后臺(tái)遍歷拼接
var ss= <ul><li id="01211014AOP145" onclick="getLi(this)" >福建省</li></ul>
比如說(shuō)以下是 .net 的寫(xiě)法（寫(xiě)的比較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)擊福建省 就可以寫(xiě)通用的click事件，后臺(tái)拼接的onclick="getLi(this)"
在前端就寫(xiě)上
function getLi(obj){
var id=$(obj).attr("id");
var text=$(obj).text();
//可以通過(guò)省份id 寫(xiě)ajax去獲取市的數(shù)據(jù)
}
然后這樣就獲取到省份的 text id ，通過(guò)click事件可以獲取到 城市的數(shù)據(jù) 同樣加載 id和text。在拼接文本到 最上面的輸入框就是最終結(jié)果 （這個(gè)還沒(méi)寫(xiě)，很簡(jiǎn)單，懶癌發(fā)作了不想寫(xiě)了），對(duì)了上面的文本已經(jīng)設(shè)置了只讀readonly，說(shuō)到只讀 就要說(shuō)到 readonly 和disabled 的區(qū)別了，readonly只對(duì) 輸入框還有多文本輸入框有效，而且文本樣式不會(huì)更改。disabled 基本試用與所有元素，但是要注意的它的兼容性。上面的文本框設(shè)置了runat屬性 是為了方便.net后臺(tái)直接讀取數(shù)據(jù)。
相關(guān)文章
jQuery on()方法示例及jquery on()方法的優(yōu)點(diǎn)
使用jquery on()方法綁定事件是官方推薦的一種方法，接下來(lái)跟著小編來(lái)學(xué)習(xí)jquery on()方法，小伙伴快來(lái)一起學(xué)習(xí)吧2015-08-08
基于jQuery實(shí)現(xiàn)點(diǎn)擊最后一行實(shí)現(xiàn)行自增效果的表格
現(xiàn)在任何事務(wù)都追求效率和人性化，當(dāng)然網(wǎng)頁(yè)效果也是如此，如果一個(gè)可以編輯數(shù)據(jù)的表格，編輯到最后一行的時(shí)候，點(diǎn)擊可以自動(dòng)添加一行，這樣算是一個(gè)比較人性化的效果，可以免去一絲勞頓之苦，下面分享一段這樣的代碼2016-01-01
基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動(dòng)匹配相關(guān)信息，感興趣的小伙伴們可以參考一下2016-05-05
jquery的ajaxSubmit()異步上傳圖片并保存表單數(shù)據(jù)演示代碼
使用jquery的ajaxSubmit()異步上傳圖片的捅死實(shí)現(xiàn)保存表單數(shù)據(jù)，具體演示代碼如下,感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-06-06
下面小編就為大家?guī)?lái)一篇淺談jquery之on()綁定事件和off()解除綁定事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
JQuery入門——用bind方法綁定事件處理函數(shù)應(yīng)用介紹
bind()功能是為每個(gè)選擇元素的事件綁定處理函數(shù),感興趣的你可以了解下它的語(yǔ)法bind(type, [data], fn),參數(shù)data是作為event.data屬性值傳遞對(duì)象的額外數(shù)據(jù)對(duì)象,好好學(xué)習(xí)希望本可以幫助到你2013-02-02
jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery獲取復(fù)選框checkbox的值實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了jQuery針對(duì)各類元素操作基礎(chǔ),包括jQuery基礎(chǔ)操作、選擇要操作的元素及處理DOM元素等,是深入學(xué)習(xí)jQuery所必備的基礎(chǔ)技能,需要的朋友可以參考下2014-08-08
Backstretch是一款簡(jiǎn)單的jQuery插件，可以幫助你給網(wǎng)頁(yè)添加一個(gè)動(dòng)態(tài)的背景圖片，可以自動(dòng)調(diào)整大小適應(yīng)屏幕的尺寸，當(dāng)然這樣做的缺點(diǎn)是當(dāng)圖片尺寸比屏幕小的時(shí)候,圖片會(huì)因?yàn)樽詣?dòng)延伸而變形，所以我們可以勁量使用高分辨率大尺寸的圖片做背景,更重要的是支持圖片的自動(dòng)切換2015-04-04
jQueryUI寫(xiě)一個(gè)調(diào)整分類的拖放效果實(shí)現(xiàn)代碼
最近，想用jQuery做一個(gè)網(wǎng)頁(yè)的樹(shù)目錄結(jié)構(gòu)，并且可以使用鼠標(biāo)拖動(dòng)調(diào)整選項(xiàng)的位置。我在網(wǎng)上找了一下插件，基本上看了好幾款比較著名的，都覺(jué)得代碼太復(fù)雜了或者界面太丑了等各種不符合我的要求2012-05-05