jquery省市二级联动,jquery下拉框二级联动

SSH里做省市的二级联动采用什么方案好，还是用jquery实现好，希望各位大神指教

如果数据量不是很大的话，可以把所有的内容一次性发到前端，用JS实现。

目前成都创新互联已为上千家的企业提供了网站建设、域名、虚拟主机、网站托管运营、企业网站设计、颍上网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

如果数据量比较大的话，可以在选择完第一级内容之后，将第一级内容ajax发到后台，获取第二级内容，同理，如果是三级联动的话，选择完第二级也要ajax发请求。

JS实现的话，使用原生JS和使用jquery都是一样的，使用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

希望对你有帮助！

插件jquery.cityselect.js省市联动效果怎么使用

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"

});

jquery如何动态产生二级联动，就是点击添加按钮后产生一个二级联动

二级联动:

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