13518219792
jquery+ajax就可以搞定的
创新互联是一家集网站建设,宣恩企业网站建设,宣恩品牌网站建设,网站定制,宣恩网站建设报价,网络营销,网络优化,宣恩网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
id，菜单名称，parentid(父级id)，排序，描述
1 河北省 0
2 石家庄 1
3 东城区 2
4 西城区 2
5 廊坊 1
6 河南省 0
接下来使用 jquery + ajax来实现联动
第一级：parentid = 0 的所有菜单
第二级： 一级菜单的onchange()事件根据选中的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函数 select_ajax_1()",
data:{"specialty_1":strvalue},
dataType: "json",
success: function (data) {
console.log(data); //控制台输出
$('#sele_2').html(""); //清空
//读取json数据
for (var i=0;idata.length;i++){
// 数据库的联动菜单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数据
echo json_encode(查询结果数组);
}
title纯JS省市区联动/title
script type="text/javascript" src="jsAddress.js"/script
/head
body
div
省：select id="cmbProvince"/select
市：select id="cmbCity"/select
区：select id="cmbArea"/select
br /br /
省：select id="Select1"/select
市：select id="Select2"/select
区：select id="Select3"/select
script type="text/javascript"
addressInit('cmbProvince', 'cmbCity', 'cmbArea', '陕西', '宝鸡市', '金台区');
addressInit('Select1', 'Select2', 'Select3');
/script
根据插件，调用
以下代码放在一个单独的js文件中，在页面上引用即可调用
复制代码 代码如下:
//获取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;
}
}
//省市区，流域，水系，断面条件选择
$(function() {
var $ddlprovince = $("#ddlProvince"); //省份
var $ddlcity = $("#ddlCity"); //城市
var $ddlarea = $("#ddlAreaName"); //区域
//根据省份查询城市
//$ddlprovince.focus(); //不要加focus,否则设置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("--请选择--"));
}
//从新选择省份或者从新选择城市都会初始化区域
$("select[id$=ddlAreaName] option").remove();
$ddlarea.append($("option/option").val("-1").html("--请选择--"));
});
//如果城市没有填充数据，省份有选择数据则加载数据
if ($("select[id$=ddlCity] option").length == 1 $ddlprovince.val() != "-1") {
loadWater($ddlprovince.val(), "SelectCity");
//读cookie,有值则设为选中状态
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");
}
}
//根据城市查询区域
//$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("--请选择--"));
}
});
//如果区名没有填充数据，城市有选择数据则加载数据
if ($("select[id$=ddlAreaName] option").length == 1 $ddlcity.val() != "-1") {
loadWater($ddlcity.val(), "SelectAreaName");
//读cookie,有值则设为选中状态
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));
}
}
}
