在选择下拉选项时需要帮助更新输入字段

Question

I'm building a currency exchange app and I've got the basic functionality done but the problem is that if I change the target currency while not changing the base currency input value, the target currency doesn't update. 我正在构建一个货币兑换应用程序，并且已经完成了基本功能，但问题是，如果我在不更改基础货币输入值的情况下更改了目标货币，则目标货币不会更新。 I'd like it so that when I change any value in the second element it automatically recalculates the rate based on what is already in the base input. 我想要这样，以便当我更改第二个元素中的任何值时，它会根据基本输入中已有的内容自动重新计算速率。

This is my first time asking a question on SO so be gentle. 这是我第一次这样问一个问题，所以要保持温柔。

Thank you. 谢谢。

You can find the project here: https://codepen.io/azdravkovski/pen/BddLeQ?editors=0010 您可以在这里找到该项目： https : //codepen.io/azdravkovski/pen/BddLeQ?editors=0010

    $(document).ready(function () {

    //First AJAX call populates dropdown
    $.ajax({
        url: 'https://api.fixer.io/latest?',
        success: function(data) {
            var currencyNoBase = Object.keys(data.rates);
            var currencyWithBase = currencyNoBase.concat(data.base).sort();
            //Populate dropdown lists with currency names
            $.each(currencyWithBase, function (val, text) {
                $('.currencies').append($('<option />').val(val).html(text));
            });
            //Set default currencies in base and target
            $('#base').val('8');
            $('#target').val('30');
        },
        dataType: 'json'
    });

    //return selected base currency
    $('#curr1').on('input', function() {
        var base = $('#base option:selected').text();
        var url = 'https://api.fixer.io/latest?base=' + base;

//      Second AJAX call sets base currency
        $.ajax({
            url: url,
            success: function(data2) {
                var target = $('#target option:selected').text();
                var curr1 = $('#curr1').val();
                var curr2 = $('#curr2').val();
                var converted = curr1 * data2.rates[target];

                $('#curr2').val(converted.toFixed(2));
                console.log(converted);

                //Clear input fields when changing currency
                $('#base').on('change', function() {
                    $('#curr1').val('');
                    $('#curr2').val('');
                })
            },
            dataType: 'json'
        });

    });

And the html: 和html：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Currency Exchange Rate App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.1/rickshaw.min.css">
</head>

<body>

    <!--INTERFACE-->
    <select name="base" class="currencies" id="base"></select>
    <input type="number" name="curr1" min="0" id="curr1" placeholder='0' step='.1'>
    <br>
    <br>
    <select name="target" class="currencies" id="target"></select>
    <input type="number" name="curr2" min="0" id="curr2" placeholder='0' disabled>
    <!--    <button id="convert">Convert</button>-->
    <div id="test"></div>
    <br>
    <br>
    <!--CHART-->
    <div id="chart"></div>

    <!--SCRIPTS-->

    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.6.1/rickshaw.js"></script>
    <script type="text/javascript" src="vendor/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="src/app.js"></script>

</body>

</html>

Answer 1

Your code is largely there, I have added a jQuery 'change' event to the target currency option and by-and-large duplicated the second ajax call code. 您的代码大部分都在那儿，我在目标货币选项中添加了一个jQuery'change'事件 ，并且大体上复制了第二个ajax调用代码。 This results in the additional behaviour I understand you wanted. 这导致我了解您想要的其他行为。

JS Fiddle: https://jsfiddle.net/2Tokoeka/Lyxwkux1/ JS小提琴： https : //jsfiddle.net/2Tokoeka/Lyxwkux1/

Additional code: 附加代码：

// Event recognition for target currency option change
  $('select#target').on('change', function() {
    var base = $('#base option:selected').text();
    var url = 'https://api.fixer.io/latest?base=' + base;

  // Second AJAX call sets base currency
    $.ajax({
        url: url,
        success: function(data2) {
            var target = $('#target option:selected').text();
            var curr1 = $('#curr1').val();
            var curr2 = $('#curr2').val();
            var converted = curr1 * data2.rates[target];

            $('#curr2').val(converted.toFixed(2));
            console.log(converted);
        },
        dataType: 'json'
    });
  });

In terms of consolidating the code when you're ready, you could also make the second AJAX call a separate function and call it for each event and also extract the code section which clears the code when the base currency is changed into its own block. 就准备就绪时的代码合并而言，您还可以使第二个AJAX调用一个单独的函数并针对每个事件调用它，还可以提取代码部分，以在基础货币更改为自己的代码块时清除代码。 This is shown in the JS-Fiddle linked above. 这在上面的JS-Fiddle中显示。

在选择下拉选项时需要帮助更新输入字段

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-08-14 22:56:45

在选择下拉选项时需要帮助更新输入字段

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-08-14 22:56:45

解决方案1
0 已采纳 2017-08-14 22:56:45