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

Question

我正在尝试复制this website上出现的那种功能。上面提到的“获取保护计划”按钮的价格会根据从下拉菜单和所选单选按钮中选择的不同选项进行更新。

现在我有一个表单，其中有2个只读输入字段用于'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，

完成

以下是您想要的结果的小提琴Demo。