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

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

本文关键字：网页 图像 更新 选择 何使 下拉列表      更新时间：2023-09-26

在网站http://www.gofundme.com/sign-up/上，他们有一个很酷的功能，可以在您输入金额的下面选择您的货币。当你兑换货币时，你输入的金额旁边的符号也会随之改变。

我想在我的网站上做一些类似的事情，但不知道如何去做。有人能给我指个方向吗?

对我好点，伙计们;我以前做过一些网站制作，但从来没有做过太壮观的。

该站点的代码都是客户端代码，而且相当简单。

你点击链接，它会调用Javascript来显示弹出的选择。

当你在选择弹出div上选择一个项目时，它也会调用Javascript。javascript修改:

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

…并关闭弹出式div

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

下面是代码，直接从"view source"中截取:

金额栏:

<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]" />

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'));

首先要用下拉列表唯一地标识要更改的文本。

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

然后你要创建一个下拉列表，其中包含你想要的值。

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

然后需要使用JavaScript根据下拉框的值更改文本的值。

document.getElementById('currencySelect').onchange = function(){
    document.getElementById('currencySymbol').innerHTML = this.value;
}
相关文章：