jquery+ajax就可以搞定的
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、岳塘網(wǎng)站維護(hù)、網(wǎng)站推廣。
id，菜單名稱，parentid(父級(jí)id)，排序，描述
1 河北省 0
2 石家莊 1
3 東城區(qū) 2
4 西城區(qū) 2
5 廊坊 1
6 河南省 0
接下來(lái)使用 jquery + ajax來(lái)實(shí)現(xiàn)聯(lián)動(dòng)
第一級(jí)：parentid = 0 的所有菜單
第二級(jí)： 一級(jí)菜單的onchange()事件根據(jù)選中的value 比如：value=1 使用ajax獲取 parentid=1的菜單，
前臺(tái)代碼：
select onchange="change_1()" name="sele_1" id="sele_1"
option value="1" 河北省/option
option value="2" 河南省/option
/select
select onchange="change_2()" name="sele_2" id="sele_2"
option value="2" 石家莊/option
option value="5" 廊坊/option
/select
script
function change_1(){
var strvalue=$("#sele_1").val();
$.ajax({
type:'post',
url: "PHP函數(shù) select_ajax_1()",
data:{"specialty_1":strvalue},
dataType: "json",
success: function (data) {
console.log(data); //控制臺(tái)輸出
$('#sele_2').html(""); //清空
//讀取json數(shù)據(jù)
for (var i=0;idata.length;i++){
// 數(shù)據(jù)庫(kù)的聯(lián)動(dòng)菜單ID 菜單名
$('#sele_2').append("option value='"+data[i].linkageid+"' "+data[i].name+"/option");
}
},
error:function(data){
alert("異常！");
}
})
}
/script
后臺(tái)php代碼：
function select_ajax_1() {
//獲取ajax傳來(lái)的 specialty_1
$valueid = intval($_POST['specialty_1']);
/*
查詢 parentid=$valueid的菜單
*/
//返回json數(shù)據(jù)
echo json_encode(查詢結(jié)果數(shù)組);
}
HTML
首先在head中載入jquery庫(kù)和cityselect插件。
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/jquery.cityselect.js"/script
接下來(lái)，我們?cè)?city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級(jí)聯(lián)動(dòng)，則去掉第三個(gè)dist的select即可。
div id="city"
select class="prov"/select
select class="city" disabled="disabled"/select
select class="dist" disabled="disabled"/select
/div
jQuery
調(diào)用cityselect插件非常簡(jiǎn)單，直接調(diào)用：
$("#city").citySelect();
自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。自定義參數(shù)調(diào)用，設(shè)置默認(rèn)省市區(qū)。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"長(zhǎng)沙", //城市
dist:"岳麓區(qū)", //區(qū)縣
nodata:"none" //當(dāng)子集無(wú)數(shù)據(jù)時(shí)，隱藏select
});
當(dāng)然，你還可以擴(kuò)展，自定義下拉列表選項(xiàng)數(shù)據(jù)，你可以根據(jù)需要設(shè)置下拉內(nèi)容，注意數(shù)據(jù)格式一定要為JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技術(shù)","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},
{"n":"JAVASCIPT"}]},
{"p":"編程語(yǔ)言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},
{"p":"數(shù)據(jù)庫(kù)","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});
你還可以利用PHP等后臺(tái)語(yǔ)言將數(shù)據(jù)庫(kù)中的數(shù)據(jù)轉(zhuǎn)換成JSON格式，然后使用url參數(shù)指向后臺(tái)地址也能實(shí)現(xiàn)無(wú)刷新聯(lián)動(dòng)效果。
$("#city").citySelect({
url:"data.php"
});
以下代碼放在一個(gè)單獨(dú)的js文件中，在頁(yè)面上引用即可調(diào)用
復(fù)制代碼 代碼如下:
//獲取cookie值
function readCookie(name) {
var cookieValue = "";
var search = name + "=";
if (document.cookie.length 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
//保存cookie值
function writeCookie(name, value, hours, escp) {
var expire = "";
if (hours != null) {
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
if (escp == "True") {
document.cookie = name + "=" + value + expire;
} else {
document.cookie = name + "=" + escape(value) + expire;
}
}
//省市區(qū)，流域，水系，斷面條件選擇
$(function() {
var $ddlprovince = $("#ddlProvince"); //省份
var $ddlcity = $("#ddlCity"); //城市
var $ddlarea = $("#ddlAreaName"); //區(qū)域
//根據(jù)省份查詢城市
//$ddlprovince.focus(); //不要加focus,否則設(shè)置selected有問(wèn)題
$ddlprovince.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectCity");
} else {
$("select[id$=ddlCity] option").remove();
$ddlcity.append($("option/option").val("-1").html("--請(qǐng)選擇--"));
}
//從新選擇省份或者從新選擇城市都會(huì)初始化區(qū)域
$("select[id$=ddlAreaName] option").remove();
$ddlarea.append($("option/option").val("-1").html("--請(qǐng)選擇--"));
});
//如果城市沒(méi)有填充數(shù)據(jù)，省份有選擇數(shù)據(jù)則加載數(shù)據(jù)
if ($("select[id$=ddlCity] option").length == 1 $ddlprovince.val() != "-1") {
loadWater($ddlprovince.val(), "SelectCity");
//讀cookie,有值則設(shè)為選中狀態(tài)
var cityname = readCookie("JQ_CityName");
if (cityname != null cityname != "undefined" cityname != "") {
//$("select[id=ddlWaterXiName] option:contains('" + watername + "')").attr("selected", "true");
$("select[id$=ddlCity] option[value='" + cityname + "']").attr("selected", "true");
}
}
//根據(jù)城市查詢區(qū)域
//$ddlcity.focus();
$ddlcity.bind("change keyup", function() {
if ($(this).val() != "-1") {
loadWater($(this).val(), "SelectAreaName");
//選中值存cookie
writeCookie("JQ_CityName", $(this).val(), 0.5, true);
} else {
$("select[name$=ddlAreaName] option").remove();
$ddlarea.append($("option/option").val("-1").html("--請(qǐng)選擇--"));
}
});
//如果區(qū)名沒(méi)有填充數(shù)據(jù)，城市有選擇數(shù)據(jù)則加載數(shù)據(jù)
if ($("select[id$=ddlAreaName] option").length == 1 $ddlcity.val() != "-1") {
loadWater($ddlcity.val(), "SelectAreaName");
//讀cookie,有值則設(shè)為選中狀態(tài)
var areaname = readCookie("JQ_AreaName");
if (areaname != null areaname != "undefined" areaname != "") {
$("select[id=ddlAreaName] option[value='" + areaname + "']").attr("selected", "true");
}
}
$ddlarea.bind("change keyup", function() {
if ($(this).val() != "-1") {
//選中值存cookie
writeCookie("JQ_AreaName", $(this).val(), 0.5, true);
}
});
});
function loadWater(selectedItem, typename) {
$.ajax({
type: "GET",
url: "/GetWaterxiname.ashx",
data: { usetype: typename, id: selectedItem },
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function Success(data) {
bindWater(data, typename);
}
});
}
function bindWater(data, typename) {
if (typename == "SelectCity") { //綁定城市
$("select[name$=ddlCity] option").remove(); //刪除原有的option
$("select[id$=ddlCity]").append($("option/option").val("-1").html("--請(qǐng)選擇--"));
for (var i = 0; i data.length; i++) {
$("select[id$=ddlCity]").append($("option/option").val(data[i].City).html(data[i].City));
}
}
else if (typename == "SelectAreaName") {
$("select[name$=ddlAreaName] option").remove(); //刪除原有的option
$("select[id$=ddlAreaName]").append($("option/option").val("-1").html("--請(qǐng)選擇--"));
for (var i = 0; i data.length; i++) {
$("select[id$=ddlAreaName]").append($("option/option").val(data[i].AreaName).html(data[i].AreaName));
}
}
}
title純JS省市區(qū)聯(lián)動(dòng)/title
script type="text/javascript" src="jsAddress.js"/script
/head
body
div
?。簊elect id="cmbProvince"/select
市：select id="cmbCity"/select
區(qū)：select id="cmbArea"/select
br /br /
省：select id="Select1"/select
市：select id="Select2"/select
區(qū)：select id="Select3"/select
script type="text/javascript"
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陜西', '寶雞市', '金臺(tái)區(qū)');
addressInit('Select1', 'Select2', 'Select3');
/script
根據(jù)插件，調(diào)用
重慶分公司
重慶分公司
