$.post("getSJLD.action", {pid : 1}, function(data) {
for (var i in data) {
var op = $("
");
$("#province").append(op);
}, "json")});
* 在下面我会解释为什么有city和country(For：回显)
* 而且大家可以看到我在追加完之后有个判断;
* 那个是修改回显的时候用到的;单纯的出现是三级联动是用不到的
* f2()同理 通过第一级得到第二级
* $("#province").val()是第一级的ID；注意不是PID!!!
function f1(city,country) {
$.post("getSJLD.action", {pid : $("#province").val()}, function(data) {
$("#city").empty();
for (var i in data) {
var op = $("
");
$("#city").append(op);
if(city!=null){
$("#city option").each(function(){
if($(this).text()==city){
$(this).attr("selected",true);
f2(country);
}, "json");
/* 通过第二级获取到第三级 */
function f2(country) {
$.post("getSJLD.action", {pid : $("#city").val()}, function(data) {
$("#country").empty();
for (var i in data) {
var op = $("
");
$("#country").append(op);
if(country!=null){
$("#country option").each(function(){
if($(this).text()==country){
$(this).attr("selected",true)
}, "json");
}JS 获取三级联动的值:采用拼接的方式
var adr = "";
adr += $("#provinceoption:selected").text() + " "
+ $("#city option:selected").text() + " "
+ $("#country option:selected").text();
大家可以看到我在每个取值的后面都加了一个+” ”
这个呢是为了修改的时候取值方便。直接用split(” “) 分割就OK了；
以上呢就是添加的代码，效果如图：
添加成功以后的效果如图：
因为在上面我取值的时候多加了一个 ” “，所以添加到数据库的时候就会就一个间隔
接下来就是修改回显了。
首先我们要从数据库获取到值
因为我是用esayui做的 所以我的取值是这样的
取值就不用说。大家都会!
那么现在city就是我们取到的地址的值
* 上面已经提到;在取到值得时候;因为添加的时候是" "；隔开添加的；
* 所以我们在取到值 之后用 split(" ") 切割
* citys[0] 呢就是 省 的值
* citys[1] 就是 市 的值
* citys[2] 就是 县 的值
var citys=city.split(" ");
$("#province option").each(function() {
/* 遍历省下拉框;判断下拉框值是否和取到的省的值相同;
* 相同就选中;选中之后紧接着就是第二级了;上面大家应该看到了
* f1()代表第二级;所以在选中之后进行f1()
* 并将 市 和 县 的值传过去;
* (县的值在f1()里面是不用的,是为了给f2()传过去的)
if($(this).text()==citys[0]){
$(this).attr("selected",true);
//var sheng = $(this).val();
f1(citys[1],citys[2]);
大家这个时候返回上面看第二级和第三级 联动那一块的判断代码
如图:
写到这里大家就应该清楚为什么要将 City 和 Country 给传过来了
第三级也是同理;便可回显!
好了!修改回显就完成了!
效果如图:
后台代码就是一个单表的查询
SELECT * FROM city WHERE pid = #{pid} ; -- #{pid}就是你传过去的值!
下面是表结构!
这个百度一大推!大同小异!方法是一样的!只要看好表结构知道怎么取值就行！
CREATE TABLE city (
id int(11) NOT NULL DEFAULT ‘0’,
pid int(11) DEFAULT NULL,
cityname varchar(255) CHARACTER SET utf8 DEFAULT NULL,
type int(11) DEFAULT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="area.js"></script>
<script>
$(function(){
init("province","city","area");
</script>
</head>
<!--这里的lang值为预设选中的数值,也可为空-->
<select id="province" name="province" lang="1"></select>
<select id="city" name="city" lang="2"></select>
<select id="area" name="area" lang="3"></select>
</body>
----------------------------------
function areaNext(id){
if($("#area"+id).val() == 0){
document.getElementById("area1"+id).options[0].selected=true;
document.getElementById("area2"+id).options[0].selected=true;
