Question

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

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

提前感谢您的帮助！

Answer 1

你走在正确的轨道上。它应该由javascript驱动，你可以使用一个框架。您可以尝试jQuery或mootools。还有其他的（比如原型）所以我想这是你的偏好。

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

Answer 2

我会尽力让你更轻松。

首先，将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>

你将编写一个jquery函数，在DOM加载时做好准备，函数将如下所示：

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

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

Answer 3

喜欢这个？ http://jsfiddle.net/ctgr4/

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

如何根据下拉选择实现动态文本区域？

3 个答案: