[原创]后台绑定2级联动数据 - small码

近期做一2级联动功能 网上寻找良久 许多都是数据在JS中添加数组绑定 由于数据源要在数据库中抓取 遂不取 动手自己做了一个

前台用repeater绑定 当联动有默认选择值时 用chk判断

 1  <li><em>所属大区</em>
 2                         <asp:DropDownList ID="ddlArea" Width="150px" CssClass="ddl_down" runat="server">
 3                         </asp:DropDownList>
 4                         <span class="tit_block_gray">请选择所属大区</span> </li>
 5                     <li><em>所属分公司</em>
 6                         <asp:Repeater ID="rptCity" runat="server" OnItemDataBound="rptCity_ItemDataBound">
 7                             <HeaderTemplate>
 8                                 <select class="city ddl_down">
 9                                     <option value="0">请选择城市</option>
10                                 </select>
11                             </HeaderTemplate>
12                             <ItemTemplate>
13                                 <select class="city ddl_down">
14                                     <asp:Repeater ID="rptorg" runat="server">
15                                         <ItemTemplate>
16                                             <option value="<%#Eval("id")%>" <%#Eval("id").Exp_IntTryParse()==chk ? " selected=\'selected\'":""%>>
17                                                 <%#Eval("title").ToString()%>
18                                             </option>
19                                         </ItemTemplate>
20                                     </asp:Repeater>
21                                 </select>
22                             </ItemTemplate>
23                         </asp:Repeater>
24                     </li>

View Code

JS代码 用到插件jquery 用Hidden来保存选中的城市ID 以便后台获取

 1         var currentShowCity=0;
 2         $(document).ready(function()
 3         {
 4             $("#ctl00_body_ddlBelongArea").change(function(){
 5                 $("#ctl00_body_ddlBelongArea option").each(function(i,o){
 6                     if($(this).attr("selected"))
 7                     {
 8                         $(".city").hide();
 9                         $(".city").eq(i).show();
10                         currentShowCity=i;
11                         $("#ctl00_body_HiddenID").val($(".city").eq(currentShowCity).val());        
12                     }
13                 });
14              });
15              
16             $("#ctl00_body_ddlBelongArea").change(); 
17         });
18                     
19         $(".city").change(function(){
20            $("#ctl00_body_HiddenID").val($(".city").eq(currentShowCity).val());           
21         });

View Code

 后台的绑定和chk赋值就不帖了

        protected void rptCity_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
                var rp = e.Item.FindControl("rptorg") as Repeater;
                var id = e.Item.DataItem.Exp_To<TreeListItem>().ID;
                ......
            }
        }        

View Code

C# TreeListItem中保存下拉的主要数据

代码简陋 思路模糊 新手之路进行中......