JS怎么往repeater控件里动态添加控件

JS如何往repeater控件里动态添加控件

 <script src="../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Getdata(id, titles) {//得到请求数据方法
            if (id + "" != "0")//如果当前选择的不是 请选择项
            {
                $.ajax({
                    type: "GET",
                    url: "Get.aspx?id=" + id,
                    contentType: "application/text; charset=utf-8",
                    dataType: "text",
                    success: function (msg) {                        
                        Add(titles, msg); //操作html
                    },
                    error: function (err) {
                        alert("未知错误");
                    }
                });
            }
            else {//如果选择的是 请选择项
                Add(titles, "nodata")
            }
        }
        $(document).ready(function () {
            $(".changeclass").live("change", function () {//为下拉框绑定事件
                Getdata($(this).find(":selected").val(), $(this).attr("titles")); //执行 得到请求数据方法
            });
        });
        function Add(titles, msg)//操作html
        {
            if (msg.substring(0, 6) != "nodata")//如果有返回正常数据
            {                
                var str = "<select name='seleNma' id='sele" + (parseInt(titles) + 1) + "' titles='" + (parseInt(titles) + 1) + "' class='changeclass'>"; //下拉框html
                var tem;
                msg = msg.split("*"); //返回的正常数据为 1,A*2,B* 进行拆分
                // var label = msg[0];
                if ($("#sele" + (parseInt(titles) + 1)).length > 0)//如果存在正要创建id相同的select项
                {
                    $("#sele" + titles).nextAll().each(function () {//把当前类别后的所有子类别清除
                        $("#show select[id=" + $(this).attr("id") + "]").remove(); //清除
                    });
                    for (var i = 0; i < msg.length - 1; i++)//循环附值返回数据 
                    {
                        tem = msg[i].split(","); //数据格式为 1,A 
 
                        str += "<option value=" + tem[0] + ">" + tem[1] + "</option>"; //绑定ID和NAME
                    }
                    str += "</select>";
                    $("#sele" + titles).after(str); //在当前选择项最后添加子类                   
                }
                else {//如果不存在正要创建id相同的select项
                    for (var i = 0; i < msg.length - 1; i++)//循环附值返回数据
                    {
                        tem = msg[i].split(","); //数据格式为 1,A
                        str += "<option value=" + tem[0] + ">" + tem[1] + "</option>"; //绑定ID和NAME
                        if (i == msg.length - 2) {
                            $("#hf").val(tem[0]);
                        }
                    }
                    str += "</select>";
                    $("#sele" + titles).after(str); //在当前选择项最后添加子类
                    //  $("#sele" + titles).after(label);
                }
            }
            else {//如果返回数据不正常
                
                $("#sele" + titles).nextAll().each(function () {//得到当前下的所有子类
                    $("#show select[id=" + $(this).attr("id") + "]").remove(); //移除
                });
            }
        }
    </script>

<form id="form1" runat="server">
    <div>
        <div id="show">
            <asp:HiddenField ID="hf" runat="server" />
            <asp:DropDownList ID="sele0" runat="server" titles="0" CssClass="changeclass">
            </asp:DropDownList>
        </div>
    </div>
   
    </form>

这个可以添加，但是，如果我要吧asp:DropDownList 放在repeater控件里，就没法添加，JS里的那个Add函数里面要怎么写呢？


以下是repeater控件里的

<script src="../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Getdata(id, titles) {//得到请求数据方法
            if (id + "" != "0")//如果当前选择的不是 请选择项
            {
                $.ajax({
                    type: "GET",
                    url: "Get.aspx?id=" + id, 
 
                    contentType: "application/text; charset=utf-8",
                    dataType: "text",
                    success: function (msg) {
                        Add(titles, msg); //操作html
                    },
                    error: function (err) {
                        alert("未知错误");
                    }
                });
            }
            else {//如果选择的是 请选择项
                Add(titles, "nodata")
            }
        }
        $(document).ready(function () {
            $(".changeclass").live("change", function () {//为下拉框绑定事件
                Getdata($(this).find(":selected").val(), $(this).attr("titles")); //执行 得到请求数据方法
            });
        });
        function Add(titles, msg)//操作html
        {
            if (msg.substring(0, 6) != "nodata")//如果有返回正常数据
            {
                var str = "<select name='seleName' id='sele" + (parseInt(titles) + 1) + "' titles='" + (parseInt(titles) + 1) + "' class='changeclass'>"; //下拉框html
                var tem;
                msg = msg.split("*"); //返回的正常数据为 1,A*2,B* 进行拆分
                // var label = msg[0];
                if ($("#sele" + (parseInt(titles) + 1)).length > 0)//如果存在正要创建id相同的select项
                {
                    $("#sele" + titles).nextAll().each(function () {//把当前类别后的所有子类别清除
                        $("#show select[id=" + $(this).attr("id") + "]").remove(); //清除
                    });
                    for (var i = 0; i < msg.length - 1; i++)//循环附值返回数据 
                    {
                        tem = msg[i].split(","); //数据格式为 1,A
                        str += "<option value=" + tem[0] + ">" + tem[1] + "</option>"; //绑定ID和NAME
                    }
                    str += "</select>";
                    $("#sele" + titles).after(str); //在当前选择项最后添加子类                   
                }
                else {//如果不存在正要创建id相同的select项 
 
                    for (var i = 0; i < msg.length - 1; i++)//循环附值返回数据
                    {
                        tem = msg[i].split(","); //数据格式为 1,A
                        str += "<option value=" + tem[0] + ">" + tem[1] + "</option>"; //绑定ID和NAME
                        if (i == msg.length - 2) {
                            $("#hf").val(tem[0]);
                        }
                    }
                    str += "</select>";
                    $("#sele" + titles).after(str); //在当前选择项最后添加子类
                    //  $("#sele" + titles).after(label);
                }
            }
            else {//如果返回数据不正常

                $("#sele" + titles).nextAll().each(function () {//得到当前下的所有子类
                    $("#show select[id=" + $(this).attr("id") + "]").remove(); //移除
                });
            }
        }
    </script>

 <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">
            <ItemTemplate>
                <div id="show" runat="server">
                    <asp:DropDownList ID="sele0" runat="server" titles="0" CssClass="changeclass">
                    </asp:DropDownList>
                </div>
            </ItemTemplate>
        </asp:Repeater>
    </div>
  
    </form>

javascript dropdownlist repeater
[解决办法]
长，没太仔细看，也没怎么看明白。如果你只是想向repeat里添加一个DropDownList可以把思路换换，JS是客户端脚本，不回传服务器，所以你别添加服务器控件了，添加一个<select>...</select>HTML控件好了，就是你现在的写的ADD方法就OK了，后台用reuqest.form("控件名")获取数据。一定要添加服务器端控件，那就别用JS
[解决办法]
js本身就运行在客户端，还需要往repeat这种服务端控件插入子控件吗？
对js而言，那些个就是一棵dom树而已
jquery可以直接插入html，也可以插入dom对象

查看更多 下一篇