web前端实现级联绑定

如何来描述这个问题了？？？

实现网页上级联绑定，就像我们选择国家之后，省份栏会自动出现国家对应的省份，当选择一个省份之后，县级市栏会自动出现对应的县级市。

这就是简单的数据库的级联绑定。

结合我开发的项目进行一些总结：

1、要实现的效果：调用AMS、道聚城接口绑定在线任务

当我选择一个平台时，在活动栏目下拉框中对自动匹配相应的活动。

前端代码html：

<dt>平台：</dt><dd><select id="FactPlat" name="FactPlat" ><option value="0">--请选择平台--</option><option {if $actInfo.FactPlat == "1"}selected=selected{/if} value="1">AMS</option><option {if $actInfo.FactPlat == "2"}selected=selected"{/if} value="2">道聚城</option><select></dd> <dt>活动：</dt><dd><select id="FplatActionId" name="FplatActionId"><option value="0">--请选择活动--</option><select><input type="hidden" id="FactJson" name="FactJson"  value="" /></dd>  

当选择一个平台之后，通过平台FactPlat的变化去触发，获取所有与平台对应的活动。

js文件中的代码如下：

function getActList(){        var platformid = $('#FactPlat').val();        var _businessType = CookieManager.getCookie("cur_business");  //获取当前业务        if(platformid == '1'){  //AMS平台            var url ='http://ams.ied.com/atm/help/activityList.php?sServiceType='+_businessType+'&type=json';            $.getScript(url,function(){                $('#FplatActionId').find('option').remove();//清空                $('#FplatActionId').append($("<option></option>").attr("value", "0").text("--请选择--"));                for( var i=0;i<actList.data.data.length;i++){                    if(actList.data.data[i].iId==platActionId){                        $('#FplatActionId').append($("<option selected=selected></option>").attr('id',i).attr("value",actList.data.data[i].iId).text(actList.data.data[i].sActivityName));                    }else{                        $('#FplatActionId').append($("<option></option>").attr('id',i).attr("value",actList.data.data[i].iId).text(actList.data.data[i].sActivityName));                    }                }                ajaxLogList();                $('#FplatActionId').change(function(){  //平台id发生变化时，获取AMS/道聚城活动的详细信息                    var obj = actList.data.data[$("#FplatActionId").find("option:selected").attr('id')];                    $('#FactJson').attr('value',JSON.stringify(obj));                });            })        }else if(platformid == '2'){//道聚城平台            var url ='http://admin.daoju.ied.com/open/gpm/activity_list.php?bz='+_businessType;            $.getScript(url,function(){                $('#FplatActionId').find('option').remove();                $('#FplatActionId').append($("<option></option>").attr("value", "0").text("--请选择--"));                for( var i=0;i<activity_list.data.length;i++){                    if(activity_list.data[i].iActionId==platActionId){                        $('#FplatActionId').append($("<option selected=selected></option>").attr('id',i).attr("value",activity_list.data[i].iActionId).text(activity_list.data[i].sActionName));                    }else{                        $('#FplatActionId').append($("<option></option>").attr('id',i).attr("value",activity_list.data[i].iActionId).text(activity_list.data[i].sActionName));                    }                }                //ajaxLogList('',$("#FplatActionId").find("option:selected").attr('value'))  //循环的调用ajaxLogList函数                ajaxLogList();                $('#FplatActionId').change(function(){  //平台id发生变化时，获取活动的详细信息                    var obj = activity_list.data[$("#FplatActionId").find("option:selected").attr('id')];                    $('#FactJson').attr('value',JSON.stringify(obj));                });            })        }    }

platformid==2表示选择的平台为道聚成，它们只是获取数据的url不同，其他的都是完全一样的。

这里主要用到了getScript异步请求数据。这里的代码不一一解释，但是每一行代码都非常非常的重要。。

主要运用到的设计构架如下图：

客户端、服务器之间的访问关系：

这里必须注意，上面的函数是在选择了某一个平台之后触发的，也就是每次刷新的时候都要重新进行触发，要不然就不会出现下拉框的值，解决办法是，除了在选择平台时进行触发函数，同时在触发之后再一次调用该函数。

$(document).ready(function(){    $('#FactPlat').change(function(){          getActList();    });});