javascript - 根据下拉列表和单选按钮选择更改 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-2”字段自动变为“$52”。我知道这可以使用 jQuery 来实现，但我无法真正弄清楚如何实现，因为我仍在学习它。期待得到解决方案。谢谢。

Answer 1

您可以使用JQuery来完成，

这是一个 fiddle Demo达到您想要的结果。