How do implement a dynamic text area based on a dropdown selection?

I have a question on how to implement a dynamic text area with link based on a dropdown selection. Once a us开发者_Go百科er chooses a retailer on my form, I want there to be dynamic text/link right next to the textbox that links to the retailer. For example if a user selects Best Buy from the dropdown, right next to the dropdown a link to bestbuy.com should appear. This should happen without the user having to select submit. Do you know how I can do this?

I'm thinking it requires javascript or some ajax but im not sure. As a beginner, it's trying to figure out how to solve this without the user having to click submit or have the page completely reload. Any advice or point in the right direction would be greatly appreciated.

Thanks in advance for your help!

I'll try to make this easier for your.

First, install jquery .js plugin to your site. It's easy, just download jquery and include it in the header of your site.

Let's say your html looks like this:

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

Somewhere else on the site, you have:

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

And you will write a jquery function which gets ready on DOM load, the function will look like this:

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

If you need more help, like how to specify various different result texts, feel free to ask and I will advance the function for you, but I wanted to keep it simple and clean for a start. This should get you started perfectly!

You are on the right track. It's supposed to be powered by javascript and you can use a framework for that. You could try jQuery or mootools for that. There are others(like prototype) so I guess it's your preference.

To help you further, what you need is the click() function from jQuery(if you prefer that). Either you get the url you want from the select options values or from ajax in which case you will be needing $.ajax also.

Like this? http://jsfiddle.net/ctgr4/

That example was created assuming that you're only going to have a static list of retailers. If you want the list of retailers to be dynamic then you just need to change how the list of retailers in the drop-down is populated, as well as how the corresponding URLs for each retailer will be set.