js动态创建控件

最近的工作中需要在弹出窗口中选择子项并返回到父窗口中，且在父窗口中要求根据返回值自动创建控件，一下是示例代码。

父窗口中的html代码：

<form id="form1" runat="server"> <div> 我现在居住的城市：<asp:TextBox ID="txtCityNow" runat="server" ReadOnly="true"></asp:TextBox> <input type="button" value="选择城市" onclick="return Open()"/> <div id="dPanel"> </div> <div id="hidControl" style="display:none" mce_style="display:none"> <input type="text" id="txtDisplayID" value="" runat="server"/> <input type="text" id="txtSelectCityID" runat="server"/> <input type="text" id="txtSelectCityName" runat="server" /> </div> </div> </form>

父窗口需要调用的js代码：

弹出窗口，并解析返回值，在该代码中调用生成控件的脚本：

生成控件脚本：

<textarea cols="50" rows="15" name="code" class="c-sharp:showcolumns">function AddControls(name,id) { //动态生成控件 var val=document.getElementById("dPanel").innerHTML; val+="<input type='radio' id='"+id+"' name='r1' value='"+name+"' onfocus='oSelect("+id+")' />"+name+"<br />"; document.getElementById("dPanel").innerHTML=val; }</textarea>

生成Radio控件发生改变时要调用的函数

function oSelect(obj) { //用户选择不同的城市时，当前居住城市文本框中显示相应的值 obj.checked=true; document.getElementById("txtCityNow").value=obj.value; document.getElementById("txtSelectCityID").value=obj.id }

子页面的html代码，在子页面中需要注意两个问题，一个就是在关闭子页面时防止在新的窗口中打开新在页面的问题，另一个是需要清除页面的缓存。

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>弹出窗体</title> <base target="_self"> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Expires" content="0" /> </head> <body onload=""> <form id="form1" runat="server"> <h1 style="font-size:14px; font-weight:bold" mce_style="font-size:14px; font-weight:bold">请选择你曾居住过的城市：</h1> <div style="margin-left:50px; font-size:12px" mce_style="margin-left:50px; font-size:12px"> <asp:CheckBox runat="server" ID="chk1" Text="武汉"/> <br /> <asp:CheckBox runat="server" ID="chk2" Text="重庆"/> <br /> <asp:CheckBox runat="server" ID="chk3" Text="杭州"/> <br /> <asp:CheckBox runat="server" ID="chk4" Text="宜昌" /> <br /> <asp:CheckBox runat="server" ID="chk5" Text="黄冈" /> <br /> </div> <asp:Button ID="btnOK" runat="server" Text="确定" OnClick="btnOK_Click"/> <asp:Button ID="btnCannel" runat="server" Text="取消" OnClientClick="window.close();"/> </form> </body>

子页面中的c#代码：

public partial class ChildrenFrom : System.Web.UI.Page { public string ids=""; protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ids = Request["id"] != null ? Request["id"].Trim(',') : ""; BindData(); } } protected void btnOK_Click(object sender, EventArgs e) { //遍历窗体中选中的checkbox string idList=""; string nameList=""; int nPageControls = this.Controls.Count; for (int i = 0; i < nPageControls; i++) { foreach (System.Web.UI.Control control in this.Controls[i].Controls) { if (control is CheckBox) { CheckBox c = control as CheckBox; if (c.Checked) { idList += c.ID + ","; nameList += c.Text + ","; } } } } string returnValue = null; if (idList.Length > 0) { idList = idList.Trim(','); nameList = nameList.Trim(','); returnValue = idList + ":" + nameList; } string jsText = ""; jsText += "<mce:script language='javascript'></mce:script>"; Response.Write(jsText); } private void BindData() { //在父页面中已经出现的城市，在子页面处于选中状态 if (ids != "") { string[] Array = ids.Split(','); for (int i = 0; i < Array.Length; i++) { CheckBox chk = (CheckBox)this.Page.FindControl(Array[i]); if (chk != null) chk.Checked = true; } } } }

秒客网

js动态创建控件

相关文章