创建动态组合框，无需刷新页面

• 下载源代码文件 - 10.3 Kb

引言

包含动态链接组合框的表单需要向服务器发送一次请求，从数据库中获取值来填充该组合框，这取决于另一个组合框的值。 Charles Carol 的优秀在线书籍这里列出了处理动态链接列表的多种方法。 我发现了一种跨浏览器（好吧，几乎跨浏览器；-）。 我在 IE 5、Netscape 6 和 7 以及 Mozilla 1.0 中测试了这段代码，它运行良好。 IFRAME 不受 NN 4.x 及更低版本支持）的方法，通过使用 IFRAME 标签来填充动态链接列表框，而无需刷新页面。

在从第一个组合框中选择一个国家/地区后，从数据库中检索到的该国家/地区的城市将填充到第二个组合框中。 第二个组合框实际上存在于无边框的 IFRAME 内部。 一个小巧的 JavaScript 函数允许组合框的值可供外部表单使用并被提交。

源代码

压缩的源代码文件包含 2 个 ASP 文件 - where.asp 和 cities.asp 以及一个 MDB 文件 City.mdb，其中包含国家/地区和城市表。

where.asp 是您首先需要使用 IIS 加载的页面。 它通过 IFRAME 引用了 cities.asp 页面。

这是 where.asp 中的小巧函数，它使存在于 IFRAME 表单中的组合框可被父表单访问

function getIframe()
{
//to access the element in the Form 
//contained in the page called by the IFrame, use
//parent.iframeName.document.iframeFormName.field.value
//here the IFrame element is assigned to the 
//hidden variable city in the parent Form

document.form1.city.value=parent.Iframe1.document.form2.elements[0].value;

}

上述脚本中引用的 city 元素是一个隐藏标签。

当从组合框中选择一个国家/地区名称时，所选值将作为查询字符串传递给 cities.asp。

<select 
   onchange='document.getElementById("Iframe1").src="cities.asp?country="+
   this.value'>

它引用了在同一页面中定义的以下 IFRAME。

<IFRAME id="Iframe1" name='Iframe1' 
  FRAMEBORDER=0 SCROLLING='no' WIDTH=120 HEIGHT=40></IFRAME>

请查看此 Microsoft 链接，以了解 IFRAME 标签的详细信息。 如果您对 IFRAME 可以完成的事情印象深刻，请查看 Searchlite v2。 此外，请查看其他两个相关文章

• 使用弹出窗口将服务器信息发送回客户端.
• 使用 XMLHTTP 刷新 Web 页面的部分内容.

链接

• 在线试用

反馈

请告诉我这篇文章是否出色或无用。 或者您有什么感受。