根據下拉菜單和單選按鈕更改2個字段的值

Question

我正在嘗試復制此網站上提供的功能。 “獲取保護計划”按鈕上方提到的價格，會根據下拉菜單和單選按鈕中的不同選項進行更新。

現在，我有一個表單，其中有兩個用於“價格”和“價格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”的第一個單選按鈕，則需要“價格”和“價格- 2”字段自動變為“ $ 52”。 我知道可以使用jQuery來實現，但是我仍然無法真正了解如何學習它。 期待獲得解決方案。 謝謝。

Answer 1

您可以使用JQuery完成，

這是您想要的結果的小提琴演示 。