java四级联动_城市三级、四级slect选择联动模板

手机端还是电脑端

补充:

自己下载测试一下

jQuery省市区三级联动

.demo{width:80%; margin:20px auto}

.demo h3{height:32px; line-height:32px}

.demo p{line-height:24px}

pre{margin-top:10px; padding:6px; background:#f7f7f7}

jQuery省市区三级联动

直接调用

二级联动，默认选项为：请选择

三级联动，默认省份：南京，隐藏无数据的子级select

$("#city_1").citySelect({nodata:"none",required:false});

$("#city_2").citySelect({prov:"南京",nodata:"none"});

设置省份、城市、地区(县)的默认值

二级联动

三级联动

$("#city_3").citySelect({prov:"江苏", city:"南京"});

$("#city_4").citySelect({prov:"江苏", city:"南京", dist:"玄武区南京"});

自定义下拉选项

$("#city_5").citySelect({

url:{"citylist":[

{"p":"前端课程","c":[{"n":"HTML5"},{"n":"CSS3","a":[{"s":"HTML"},{"s":"AJAX"}]},{"n":"JSON"}]},

{"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"Python"},{"n":"PHP"},{"n":"JAVA"}]},

{"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"},{"n":"Mssql"}]},

]},

prov:"",

city:"",

dist:"",

nodata:"none"

});

Powered by sucaihuo.com 本站皆为作者原创，转载请注明原文链接：www.sucaihuo.com

$(function() {

$("#city_1").citySelect({

nodata: "none",

required: false

});

$("#city_2").citySelect({

prov: "南京",

nodata: "none"

});

$("#city_3").citySelect({

prov: "江苏",

city: "南京"

});

$("#city_4").citySelect({

prov: "江苏",

city: "南京",

dist: "玄武区南京",

nodata: "none"

});

$("#city_5").citySelect({

url: {"citylist": [

{"p": "前端课程", "c": [{"n": "HTML5"}, {"n": "CSS3", "a": [{"s": "HTML"}, {"s": "AJAX"}]}, {"n": "JSON"}]},

{"p": "编程语言", "c": [{"n": "C"}, {"n": "C++"}, {"n": "Python"}, {"n": "PHP"}, {"n": "JAVA"}]},

{"p": "数据库", "c": [{"n": "Mysql"}, {"n": "SqlServer"}, {"n": "Oracle"}, {"n": "Mssql"}]},

]},

prov: "",

city: "",

dist: "",

nodata: "none"

});

});