javascript - 如何使下拉列表选择更新网页上的图像？

Question

现场http://www.gofundme.com/sign-up/他们有很酷的能力，可以在您输入金额的下方选择您的货币。当您更改货币时，它会更改您输入的金额旁边的符号。

我想对我的网站做一些类似的事情，但对如何去做却没有太多线索。谁能指出我正确的方向？

伙计们，对我放轻松；我以前做过一些网站制作，但从来没有太壮观。

Answer 1

那个网站上的代码都是客户端的，而且相当简单。

您单击该链接，它会调用显示选择弹出 ​​div 的 Javascript。

当您在选择弹出 ​​div 上选择一个元素时，它还会调用 Javascript。该 javascript 修改:

• 金额字段的原始 div 标签文本(即大€)
• 下面描述您当前选择的货币类型的文字(弹出 div 的那个)
• 隐藏表单字段中的数据，具有选定的货币类型

...并关闭弹出 div。

编辑:显然您还需要 jQuery library为了在我的回答中使用代码 :) 您可以替换您自己的 Javascript 代码，并获得相同的结果，但它看起来不像下面的代码。

这是直接从“查看源代码”中提取的代码:

金额框:

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

打开弹出div的链接:

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

弹出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>

隐藏的表单域:

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

将它们绑定(bind)在一起的 Javascript (jQuery) 代码:

$('.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'));