189 8069 5689
如果数据量不是很大的话，可以把所有的内容一次性发到前端，用JS实现。
目前成都创新互联已为上千家的企业提供了网站建设、域名、虚拟主机、网站托管运营、企业网站设计、颍上网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
如果数据量比较大的话，可以在选择完第一级内容之后，将第一级内容ajax发到后台，获取第二级内容，同理，如果是三级联动的话，选择完第二级也要ajax发请求。
JS实现的话，使用原生JS和使用jquery都是一样的，使用jquery的话比较轻松一点，需要写的代码量比较少
你好！
下面是个简单的小例子，仅供参考：
script type="text/javascript"
$(document).ready(function(){
var data={
"liaoning":{
"210100000000":"沈阳市",
"210200000000":"大连市",
"210300000000":"鞍山市"
},
"heilongjiang":{
"230100000000":"哈尔滨市",
"230200000000":"齐齐哈尔市",
"230300000000":"鸡西市"
}
};
$("#aa").change(function(){
if(this.value==0){
$("#bb").empty();
} else {
for(var key in data){
if(key==this.value){
$("#bb").empty();
for(var kkey in data[this.value]){
$("option /").attr("value",kkey).text(data[this.value][kkey]).appendTo($("#bb"));
}
}
}
}
});
});
/script
/head
body
select id="aa"
option value="0"请选择省/option
option value="liaoning"辽宁/option
option value="heilongjiang"黑龙江/option
/select
select id="bb"
/select
/body
希望对你有帮助！
HTML
首先在head中载入jquery库和cityselect插件。
script type="text/javascript" src="js/jquery.js"/script
script type="text/javascript" src="js/jquery.cityselect.js"/script
接下来，我们在#city中，放置三个select，并且三个select分别设置class属性为：prov、city、dist，分别表示省、市、区（县）三个下拉框。注意如果只想实现省市二级联动，则去掉第三个dist的select即可。
div id="city"
select class="prov"/select
select class="city" disabled="disabled"/select
select class="dist" disabled="disabled"/select
/div
jQuery
调用cityselect插件非常简单，直接调用：
$("#city").citySelect();
自定义参数调用，设置默认省市区。自定义参数调用，设置默认省市区。
$("#city").citySelect({
url:"js/city.min.js",
prov:"湖南", //省份
city:"长沙", //城市
dist:"岳麓区", //区县
nodata:"none" //当子集无数据时，隐藏select
});
当然，你还可以扩展，自定义下拉列表选项数据，你可以根据需要设置下拉内容，注意数据格式一定要为JSON格式。
$("#city").citySelect({
url:{"citylist":[
{"p":"前端技术","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":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},
]},
prov:"",
city:"",
dist:"",
nodata:"none"
});
你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式，然后使用url参数指向后台地址也能实现无刷新联动效果。
$("#city").citySelect({
url:"data.php"
});
二级联动:
script
//点击按钮生成一级联动
$("button").on("click",function(){
var oneSelect = "select name='oneSelect'/select";
$("body").append(oneSelect);
});
//这里说明下，英文二级联动是根据一级联动来的，逻辑代码看你自己了，因为
//一级联动是js动态生成的，再绑定事件涉及特殊方法live,而live这个方法1.8.3
//jquery版本以后是废弃的，所以要使用
//$("select[name=oneSelect]").on("change","父级节点",fucntion(){});
//根据你的一级联动以及需求选择触发二级联动
$("select[name=oneSelect]").live("change",function(){
var twoSelect = "select name='twoSelect'/select";
$("body").append(twoSelect);
});
/script