如何实现基于下拉选择的动态文本区域？答案

【问题标题】：How do implement a dynamic text area based on a dropdown selection?如何实现基于下拉选择的动态文本区域？
【发布时间】：2011-03-24 03:50:04
【问题描述】：

我有一个关于如何基于下拉选择实现带有链接的动态文本区域的问题。一旦用户在我的表单上选择了零售商，我希望在链接到零售商的文本框旁边有动态文本/链接。例如，如果用户从下拉列表中选择 Best Buy，则在下拉列表旁边应该会出现一个指向 bestbuy.com 的链接。这应该在用户不必选择提交的情况下发生。你知道我该怎么做吗？

我认为它需要 javascript 或一些 ajax，但我不确定。作为初学者，它试图弄清楚如何解决这个问题，而无需用户单击提交或完全重新加载页面。任何建议或正确方向的建议将不胜感激。

提前感谢您的帮助！

【问题讨论】：

标签： php javascript html ajax

【解决方案1】：

我会尽量让您更轻松。

首先，将 jquery .js 插件安装到您的站点。这很简单，只需下载 jquery 并将其包含在您网站的标题中即可。

假设您的 html 如下所示：

<select name="whatever">
   <option id="option-1" value="some value">some text</option>
</select>

在网站的其他地方，您有：

<div id="place-the-result-here"></div>

您将编写一个在 DOM 加载时准备就绪的 jquery 函数，该函数将如下所示：

$("#option-1").click(function(){
   $("#place-the-result-here").html('this is the text that gets written to your div');
});

如果您需要更多帮助，例如如何指定各种不同的结果文本，请随时提出，我会为您推进该功能，但我想先保持简单和干净。这应该可以让您完美地开始！

【讨论】：

如果这个答案解决了您的问题，您应该点击帖子左侧的 TICK 图标接受它

【解决方案2】：

你在正确的轨道上。它应该由 javascript 提供支持，您可以为此使用框架。你可以试试jQuery 或mootools。还有其他（如原型），所以我想这是您的偏好。

为了进一步帮助您，您需要的是来自 jQuery 的 click() 函数（如果您愿意的话）。您可以从选择选项值或 ajax 获得所需的 url，在这种情况下，您还需要 $.ajax。

【讨论】：

【解决方案3】：

像这样？ http://jsfiddle.net/ctgr4/

创建该示例的前提是您只有一个静态的零售商列表。如果您希望零售商列表是动态的，那么您只需更改下拉列表中零售商列表的填充方式，以及每个零售商的相应 URL 的设置方式。

【讨论】：