求助!根据下拉框中的数值动态生成对应行数的表格
刚刚学习.net不久,今天要求做一个产品界面的模板,行数在2,3,4 行,每行两种产品,每个产品单元格中要求既能输入文本,图片,也可以二者都输入。根据行数和每个单元格内容属性的不同生成不同的产品类别模板,供后台管理员使用。我是这样考虑的,用一个下拉框DropDownList,里面分别有2,3,4 三个选项,然后当我选择“2”的时候,自动就在同一个页面里生成一个两行两列的表格,然后在每个单元格里在有三个选项:图片、文字、图片和文字。
大体上就是这样,我想用AJAX做,这样就不用点击提交了,AJAX也是刚刚学习的阶段,很多东西也不太明白,照猫画虎的搞了一些代码,但是无法执行,还请各位前辈指教,小弟不胜感激!
主要就是想明确,AJAX中那个下拉列表的值如何返回到当前页面,然后再被程序使用,动态生成这样一个行数变化的表格。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Module_Add.aspx.cs" Inherits="Module_Add" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- HTML code
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>制作模板,第一步</title></head><script language="javascript">function ajaxFunction(){ var xmlHttp; try{ xmlHttp=new XMLHttpRequest(); } catch(e){ try{ xmlHttp=new ActiveXObject(Msxml2.XMLHTTP); } catch(e){ try{ xmlHttp=new ActiveXObject(Msxml.XMLHTTP); } catch(e){ alert('您的浏览器不支持AJAX!'); return false; } } } xmlHttp.onreadystatechange=function() { if (xmlHttp.Readystate==4) { var dd1=document.getElementById("DropDownList1"); var index=dd1.selectIndex; var aaa=dd1.options[index].value; alert("aaa"); //这里无法执行 } } xmlHttp.open("GET","",true); //xmlHttp.send(Null); }</script><body><form name="form1" method="post" action="" runat="server"><table width="80%" align="center" style="border:solid 1px #4397c5; padding:0;"> <tr style="border:solid 1px #4397c5"> <td height="27" colspan="4">新增产品页面模板</td> </tr> <tr style="margin:0px;"> <td style="width: 107px; border:solid 1px #4397c5; margin:-2px; height: 25px;">模板名称</td> <td style="width: 237px; height: 25px;"><input type="text" name="tf_module_name" value="产品模板"></td> <td style="width: 115px; height: 25px;">模板行数</td> <td width="27%" style="height: 25px"> <asp:DropDownList ID="DropDownList1" runat="server"> <asp:ListItem Value="2">2</asp:ListItem> <asp:ListItem Value="3">3</asp:ListItem> <asp:ListItem Value="4">4</asp:ListItem> </asp:DropDownList> </td> </tr> <div id="rownum"> </div></table><table> 里面动态生成模板的行数</table></form></body></html>[解决办法]
用ajax实现思想,先新建一个新的Data.aspx用于被ajax请求页面,可以该页面后台写代码,根据判断下拉框
参数返回相应内容。
- JScript code
<script language="javascript">var xmlHttp = false;function CreateXMLHttpRequest(){ try{ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }}function StartRequest(RequestUrl,HandleFunctionName){ CreateXMLHttpRequest(); xmlHttp.open("GET",RequestUrl,false); xmlHttp.setRequestHeader("Content-Type", "text/xml"); xmlHttp.setRequestHeader("charset", "utf-8"); xmlHttp.onreadystatechange = HandleFunctionName; xmlHttp.send(null);}function GetData() { var listType = document.all.DropDownList1.options[document.all.DropDownList1.selectedIndex].value; var Url = "Data.aspx?Type=" + listType; StartRequest(Url, HandleReload);}function change() { GetData(); }function HandleReload() { try { if (xmlHttp.readyState == 4) { var returnHtml = xmlHttp.responseText; document.getElementById("rownum").innerHTML = returnHtml; } } catch(e) { window.alert(e); }}</script>