這篇文章給大家分享的是有關(guān)Ajax如何實(shí)現(xiàn)彈出式無(wú)刷新城市選擇功能的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)服務(wù)團(tuán)隊(duì)是一支充滿著熱情的團(tuán)隊(duì)，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標(biāo)準(zhǔn)與要求，同時(shí)竭誠(chéng)為客戶提供服務(wù)是我們的理念。創(chuàng)新互聯(lián)把每個(gè)網(wǎng)站當(dāng)做一個(gè)產(chǎn)品來(lái)開(kāi)發(fā)，精雕細(xì)琢，追求一名工匠心中的細(xì)致，我們更用心！
具體如下：
這是一款很棒的全國(guó)城市選擇效果，添加城市時(shí)先添加組：找到id是"selectSub"中select標(biāo)簽下，添加option標(biāo)簽，value屬性遞增，找到id是"selectSub"，按照原有格式添加div，其id屬性遞增；然后添加二級(jí)副選框選項(xiàng)：復(fù)制id是"selectSub"下任意input標(biāo)簽，粘貼在需要添加的位置即可，你想擴(kuò)展的話，配合動(dòng)態(tài)語(yǔ)言完全可以將城市從數(shù)據(jù)庫(kù)中讀取出來(lái)。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-ajax-dialog-cha-city-codes/
具體代碼如下：
Ajax彈出式無(wú)刷新城市選擇特效
BODY {
FONT-SIZE: 12px; PADDING-TOP: 50px
}
H2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.bton {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
.cont {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#main {
MARGIN: 0px auto; WIDTH: 400px
}
#selectItem {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px
}
#preview {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
#result {
BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid
}
.tit {
PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px
}
.bgc_ccc {
BACKGROUND: #ccc
}
.bgc_eee {
BACKGROUND: #eee
}
.c_999 {
COLOR: #999
}
.pointer {
CURSOR: pointer
}
.left {
FLOAT: left
}
.right {
FLOAT: right
}
.cls {
CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px
}
#bg {
DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7
}
.hidden {
DISPLAY: none
}
.move {
CURSOR: move
}
您已選擇的城市匯總
重慶分公司
重慶分公司