How do I make a drop down list selection update an image on a web page?

Question

On the site http://www.gofundme.com/sign-up/ they have the cool ability to select your currency underneath where you enter an amount. When you change the currency it changes the symbol beside the amount you type in.

I'd like to do something similar with my website but don't have much of a clue about how to even go about it. Can anyone point me in the right direction?

Go easy on me guys; I've done a bit of website making before but never anything too spectacular.

Answer 1

The code on that site is all client-side, and is fairly simple.

You click the link, it invokes Javascript that shows the selection popup div.

When you select an item on the selection popup div, it also calls Javascript. That javascript modifies:

• The original div's label text for the amount field (ie the big € )
• The text below that describes your currently selected currency type (the one that pops up the div)
• The data in the hidden form field, with the selected currency type

...and closes the popup div.

Edit: Apparently you also need the jQuery library in order to use the code in my answer:) You could substitute your own Javascript code, and get identical results, but it wouldn't look exactly like the code below.

Here is the code, ripped straight off "view source":

The amount box:

<div class="amt_box bg_white">
    <label class="currency-display">$</label>
    <input type="text" name="Funds[goalamount]" value="" class="big-field"
        tabindex="1" />
</div>

The link that opens the popup div:

<h4>Display: <a href="#" class="currency-select">US Dollars</a></h4>

The popup div:

<div class="currency currency-select-div" style="position:absolute; display:none;margin-left:45px;">
    <ul>
        <li><a href="#" class="currency-item" title="$" code="USD">&#36; USD Dollar</a></li>
        <li><a href="#" class="currency-item" title="$" code="CAD">&#36; CAD Dollar</a></li>
        <li><a href="#" class="currency-item" title="$" code="AUD">&#36; AUD Dollar</a></li>
        <li><a href="#" class="currency-item" title="£" code="GBP">&#163; GBP Pound</a></li>
        <li><a href="#" class="currency-item" title="€" code="EUR">&#128; EUR Euro</a></li>
    </ul>
</div>

The hidden form field:

<input type="hidden" id="currencyfield" value="USD" name="Organizations[currencycode]" />

The Javascript (jQuery) code that binds it all together:

$('.currency-select').click(function() {
    $('.currency-select-div').show();
    return false;
});

$('.currency-item').click(function() {
    $('.currency-select-div').hide();
    $('.currency-display').text($(this).attr('title'));
    $('.currency-select').text($(this).text());
    $('#currencyfield').val($(this).attr('code'));

Answer 2

You're going to want to uniquely identify the text that you're trying to change with your drop-down list first.

<span id="currencySymbol">$</span>

Then you're going to want to create a drop-down list that has the values you want.

<select id="currencySelect">
    <option value="$">Dollars</option>
    <option value="£">Pounds</option>
    <option value="€">Euros</option>
</select>

Then you need to use JavaScript to change the value of the text based on the value of the drop-down.

document.getElementById('currencySelect').onchange = function(){
    document.getElementById('currencySymbol').innerHTML = this.value;
}