一張表 怎么 jquery省市區(qū)三級聯(lián)動

jquery+ajax就可以搞定的

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、岳塘網(wǎng)站維護(hù)、網(wǎng)站推廣。

id，菜單名稱，parentid(父級id)，排序，描述

1 河北省 0

2 石家莊 1

3 東城區(qū) 2

4 西城區(qū) 2

5 廊坊 1

6 河南省 0

接下來使用 jquery + ajax來實(shí)現(xiàn)聯(lián)動

第一級：parentid = 0 的所有菜單

第二級： 一級菜單的onchange()事件根據(jù)選中的value 比如：value=1 使用ajax獲取 parentid=1的菜單，

前臺代碼：

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); //控制臺輸出

$('#sele_2').html(""); //清空

//讀取json數(shù)據(jù)

for (var i=0;idata.length;i++){

// 數(shù)據(jù)庫的聯(lián)動菜單ID 菜單名

$('#sele_2').append("option value='"+data[i].linkageid+"' "+data[i].name+"/option");

}

},

error:function(data){

alert("異常！");

}

})

}

/script

后臺php代碼：

function select_ajax_1() {

//獲取ajax傳來的 specialty_1

$valueid = intval($_POST['specialty_1']);

/*

查詢 parentid=$valueid的菜單

*/

//返回json數(shù)據(jù)

echo json_encode(查詢結(jié)果數(shù)組);

}

插件jquery.cityselect.js省市聯(lián)動效果怎么使用

HTML

首先在head中載入jquery庫和cityselect插件。

script type="text/javascript" src="js/jquery.js"/script

script type="text/javascript" src="js/jquery.cityselect.js"/script

接下來，我們在#city中，放置三個(gè)select，并且三個(gè)select分別設(shè)置class屬性為：prov、city、dist，分別表示省、市、區(qū)（縣）三個(gè)下拉框。注意如果只想實(shí)現(xiàn)省市二級聯(lián)動，則去掉第三個(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插件非常簡單，直接調(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:"長沙", //城市

dist:"岳麓區(qū)", //區(qū)縣

nodata:"none" //當(dāng)子集無數(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":"編程語言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},

{"p":"數(shù)據(jù)庫","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

});

你還可以利用PHP等后臺語言將數(shù)據(jù)庫中的數(shù)據(jù)轉(zhuǎn)換成JSON格式，然后使用url參數(shù)指向后臺地址也能實(shí)現(xiàn)無刷新聯(lián)動效果。

$("#city").citySelect({

url:"data.php"

});

jquery省市區(qū)三級聯(lián)動編輯時(shí)怎么默認(rèn)選中

以下代碼放在一個(gè)單獨(dú)的js文件中，在頁面上引用即可調(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有問題

$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ū)域

$("select[id$=ddlAreaName] option").remove();

$ddlarea.append($("option/option").val("-1").html("--請選擇--"));

});

//如果城市沒有填充數(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ū)名沒有填充數(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("--請選擇--"));

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("--請選擇--"));

for (var i = 0; i data.length; i++) {

$("select[id$=ddlAreaName]").append($("option/option").val(data[i].AreaName).html(data[i].AreaName));

}

}

}

如何獲取jquery省市區(qū)插件選擇的內(nèi)容

title純JS省市區(qū)聯(lián)動/title

script type="text/javascript" src="jsAddress.js"/script

/head

body

div

省：select 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', '陜西', '寶雞市', '金臺區(qū)');

addressInit('Select1', 'Select2', 'Select3');

/script

根據(jù)插件，調(diào)用

網(wǎng)頁標(biāo)題：jquery省市區(qū),jquery省市區(qū)三級聯(lián)動插件
分享網(wǎng)址：http://chinadenli.net/article1/dsejiod.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、網(wǎng)站改版、標(biāo)簽優(yōu)化、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)