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

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

1 个答案: