需要幫助更新輸入字段上的選擇下拉選項

我正在建立一個貨幣兌換應用程序，我已經完成了基本功能，但問題是，如果我改變目標貨幣，而不改變基本貨幣輸入值，目標貨幣不會更新。我喜歡這樣，當我改變第二個元素中的任何值時，它會自動重新計算基於基本輸入中已有內容的速率。需要幫助更新輸入字段上的選擇下拉選項

這是我第一次問這個問題，所以要溫柔。

謝謝。

您可以在這裏找到的項目：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' 
     }); 

    });

和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>

來源

2017-08-14 Aleksandar Zdravkovski

您的代碼主要是在那裏，我添加了一個jQuery的 '變' 事件到目標貨幣選項和大小重複的第二個Ajax調用代碼。這會導致我明白你想要的額外行爲。

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

附加代碼：

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

在鞏固當你準備好了代碼方面，你也可以使第二AJAX調用一個單獨的函數，並調用它的每個事件，並提取代碼段，在基本貨幣更改爲自己的塊時清除代碼。這顯示在上面鏈接的JS-Fiddle中。

來源

2017-08-14 22:56:45 Tokoeka

需要幫助更新輸入字段上的選擇下拉選項

回答

相關問題