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
分享名称:jquery省市二级联动,jquery下拉框二级联动
网站网址:http://ybzwz.com/article/hoisog.html