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

Question

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

现在我有一个表单，其中包含 2 个只读输入字段“价格”和“价格 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-2' 字段自动变为 '$52'。我知道这可以使用 jQuery 来实现，但我无法真正弄清楚我仍在学习它是如何做到的。期待得到解决方案。谢谢。

Answer 1

你可以使用JQuery来完成，

这是一个 Fiddle Demo 用于您想要的结果。