根据选择菜单中的值显示价格

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 函数中，这样它就不会尝试执行代码直到文档的ready 事件：

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