根據選擇菜單中的值顯示價格

Question

這是我的表單HTML代碼。

<form> 
<select id="country1"> 
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Germany">Germany</option> 
    <option value="Canada">Canada</option> 
</select> 
<input name="amount1" value="" readonly="readonly" /> 

<select id="country2"> 
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Germany">Germany</option> 
    <option value="Canada">Canada</option> 
    <option value="France">France</option> 
</select> 
<input name="amount2" value="" readonly="readonly" /> 

<select id="country3"> 
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    <option value="Germany">Germany</option> 
    <option value="Canada">Canada</option> 
    <option value="Australia">Australia</option> 
    <option value="India">India</option> 
</select> 
<input name="amount3" value="" readonly="readonly" /> 

</form> 

現在在同一訂單頁面上我有多個產品，每個產品都有選擇國家名稱的菜單。

現在，這些國家中的每一個都有不同的運輸價格，所以我想要的是當用戶選擇這些國家中的任何一個來顯示其輸入框下的運輸價格。

我不熟悉JQuery，所以任何人都可以寫下使這項工作成功的代碼。有時我會在下拉菜單中添加新的國家，所以它應該很容易在JQuery中添加它們。

非常感謝！

變化： 建議之後，我的jQuery代碼：

$(function() { 
    $('#country1').change(function() { 
      var prices = { 
      'United States':9.99, 
      'United Kingdom':14, 
      'India':11, 
      'Germany':14 
      }; 
     $('input[name=amount1]').val(prices); 
    }); 
}); 

Answer 1

讓我們打破這種分割成更小的組件，每一個都是容易可研究的，可測試...

首先要到響應select元素的change事件。類似這樣的：

$('#country1').change(function() { 
    // respond to the event here 
}); 

你也想寫一個值給input元素。事情是這樣的：

$('input[name=amount1]').val(someValue); 

現在，你也想確定什麼該值。鑑於問題中的信息，我們不能爲你做到這一點。所以我會假設你已經或可以創建該邏輯。然後，結果呢？是這樣的：

$('#country1').change(function() { 
    var someValue; 
    // some logic to determine the value 
    $('input[name=amount1]').val(someValue); 
}); 

您願意爲每一對select和input元素做到這一點。另外，還需要確保元素在嘗試綁定到它們的事件之前存在（否則不會發生），因此您可以將整個事件包裝到jQuery函數中，以便它不會嘗試執行代碼，直到文檔的ready事件：

$(function() { 
    $('#country1').change(function() { 
     var someValue; 
     // some logic to determine the value 
     $('input[name=amount1]').val(someValue); 
    }); 
});