如何基于下拉选择实现动态文本区域?
问题描述:
我对如何使用基于下拉选择的链接实现动态文本区域有疑问。一旦用户在我的表单上选择零售商,我希望在链接到零售商的文本框旁边有动态文本/链接。例如,如果用户从下拉菜单中选择“最佳购买”,则在下拉菜单旁边会出现指向bestbuy.com的链接。这应该发生,而用户不必选择提交。你知道我能做到吗?如何基于下拉选择实现动态文本区域?
我在想它需要JavaScript或一些Ajax,但我不知道。作为一个初学者,它试图找出如何解决这个问题,用户不必点击提交或者让页面完全重新加载。任何建议或指向正确的方向将不胜感激。
在此先感谢您的帮助!
答
我会尽量让你更容易。
首先,将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');
});
如果您需要更多帮助,例如如何指定各种不同的租用结果文本,随时提问,我会为您提供该功能,但我想保持简单和干净的一开始。这应该让你开始完美!
答
是否这样? http://jsfiddle.net/ctgr4/
该示例是在假设您只有零售商静态列表的情况下创建的。如果您希望零售商列表具有动态性,那么您只需更改下拉列表中零售商列表的填充方式,以及如何设置每个零售商的相应网址。
感谢您的帮助! – sharataka 2011-04-01 13:40:51
如果此答案解决了您的问题,则应通过单击该帖子左侧的TICK图标来接受该问题 – 2011-04-01 15:07:25