62,046
社区成员
发帖
与我相关
我的任务
分享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>
...全文
请发表友善的回复…
发表回复
IE11下面经常卡到爆 2013-09-25
- 打赏
- 举报
js本身就运行在客户端，还需要往repeat这种服务端控件插入子控件吗？
对js而言，那些个就是一棵dom树而已
jquery可以直接插入html，也可以插入dom对象
CODE163 2013-09-25
- 打赏
- 举报
长，没太仔细看，也没怎么看明白。如果你只是想向repeat里添加一个DropDownList可以把思路换换，JS是客户端脚本，不回传服务器，所以你别添加服务器控件了，添加一个<select>...</select>HTML控件好了，就是你现在的写的ADD方法就OK了，后台用reuqest.form("控件名")获取数据。一定要添加服务器端控件，那就别用JS
KsonJsy 2013-09-25
- 打赏
- 举报
有木有大神知道的，这个其实就是repeater里面的无限级联动
