Как сделать выбор из выпадающего списка обновить изображение на веб-странице? - PullRequest
Новая
       1

Как сделать выбор из выпадающего списка обновить изображение на веб-странице?

1 голос
/ 07 июля 2011

На сайте http://www.gofundme.com/sign-up/ у них есть отличная возможность выбрать вашу валюту, под которой вы вводите сумму. Когда вы меняете валюту, она меняет символ рядом с вводимой суммой.

Я бы хотел сделать что-то похожее с моим сайтом, но понятия не имею, как это сделать. Может кто-то указать мне верное направление?

Полегче на меня, ребята; Раньше я немного занимался созданием сайтов, но никогда ничего особенного.

Ответы [ 2 ]

5 голосов
/ 07 июля 2011

Код на этом сайте полностью на стороне клиента и довольно прост.

При нажатии на ссылку запускается Javascript, который показывает всплывающее окно выбора.

Когда вы выбираетеэлемент в всплывающем окне выбора, он также вызывает Javascript.Этот javascript изменяет:

  • Исходный текст метки div для поля количества (т. Е. Большой €)
  • Текст ниже, который описывает выбранный вами тип валюты (тот, которыйвсплывает div)
  • Данные в скрытом поле формы с выбранным типом валюты

... и закрывает всплывающее окно div.

Edit: Очевидно, вам также нужна библиотека jQuery , чтобы использовать код в моем ответе :) Вы можете заменить свой собственный код 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]" />

Код 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'));
4 голосов
/ 07 июля 2011

Сначала вы захотите однозначно идентифицировать текст, который вы пытаетесь изменить, в раскрывающемся списке. 

<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;
}
...