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

这是我的表单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>

---

让我们将其分解为更小的组件，每个组件都易于研究和测试

首先要响应

select

元素的

change

事件。大概是这样的：

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

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

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

您还需要向

输入
元素写入一个值。大概是这样的：

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

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

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

现在，您还需要确定该值是多少。鉴于问题中的信息，我们不能为您这样做。所以我假设你有或者可以创造这种逻辑。结果是这样的：

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

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

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

您可以对每对
select
和
input
元素执行此操作。此外，您还希望确保元素在尝试绑定到其
更改
事件之前存在（否则不会发生任何事情），因此您可以将整个内容包装到jQuery函数中，以便在文档的
就绪
事件之前，它不会尝试执行代码：

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

我们应该猜猜在提供的html中价格隐藏在哪里？你的答案是学习Javascript教程，而不是让别人帮你做所有的工作。伙计们，如果你帮不上忙，就不需要这些答案。是的，我知道我需要学习JS，Im PHP开发者，我正在从事需要一些JQ代码的项目，所以我请求了一个快速的帮助。谢谢David的解释。请检查上面的更新线程，我根据您的建议创建了代码，但是当我选择一个国家名称时，我得到了[Object]，没有值，可能有任何建议吗？@BorisZegarac:因为您创建了
prices
作为一个对象。
输入无法将其转换为字符串。您希望在
输入中实际显示什么值？这是您在
val（）
函数中设置的值。在这种情况下，您可以通过使用
select
中的选定值将其作为数组引用，从对象中选择它。类似于：
$（'input[name=amount1]'）.val（prices[$（this.val（））（未经测试，但值得研究）可爱！按我的需要工作。“非常感谢大卫，”代表补充道。