根据下拉列表和单选按钮选择更改两个字段的值

Question

我正在尝试复制本网站中存在的那种功能。价格，上面提到的‘得到一个保护计划’按钮，更新有关不同的选项选择从下拉和单选按钮选择。

现在我有一个表单，它有两个只读输入字段'Price‘和'Price-2’，我希望根据用户选择下拉选项和单选按钮来更新这些字段的值。因此，基本上，需要更新的只读输入字段的值将是所选下拉选项和单选按钮值的加法。

下面是我创建的表单以及下拉列表和单选按钮的一个粗略示例：

<form action="#" method="post">

      <label>Last Name*</label>

        <input type="text" name="lastname" value="" required="true">

                <select id="p1">
                        <option value="1">$1</option>
                        <option value="2">$2</option>
                        <option value="3">$3</option>
                        <option value="4">$4</option>
                        <option value="5">$5</option>
                </select>

                <input id="p2" type="radio" name="price2" value="50">$50<br/>
                <input id="p2" type="radio" name="price2" value="100">$100

      <label>Price</label>

        <input type="text" name="Price" readonly="readonly" value="">

            <input type="text" name="Price-2" readonly="readonly" value="">

            <input type="submit" value="Submit">
</form>

因此，在这种形式中，如果我从值为'2‘的下拉列表中选择第二个选项，然后选择值为'50’的第一个单选按钮，我希望'Price‘和'Price-2’字段的值自动变为'$52‘。我知道这可以使用jQuery实现，但我不知道如何做到这一点，因为我仍然在学习它。期待着找到一个解决方案。谢谢。

Answer 1

你可以用JQuery来完成

这里是一个Fiddle 演示为您想要的结果。