Показать цену, основанную на значении в меню выбора

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 элементов. Кроме того, вы также хотите убедиться, что элементы существуют, прежде чем пытаться привязать их к событиям change (иначе ничего не произойдет), поэтому вы можете обернуть все это в функцию jQuery, чтобы он не пытался выполнить код до тех пор, пока document ready event:

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