javascript - 根据复选框更改选择选项的值

Question

如果用户选中复选框，是否可以更改选择选项的值。如果用户从选择选项中选择“四”，其默认值为“4”。现在如果用户选中复选框，选择选项值变为“44”。

<select name="sel" id="MySelect">
<option value="">Select One</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>

<input type="checkbox" name="btn_radio" />Discount

Answer 1

只需修改<option>当复选框更改时:

(function() {

  var discount = document.getElementById("discount");
  var option = document.querySelector("#amount option[value='4']");

  discount.addEventListener("change", function(e) {
    if (this.checked) {
      option.value = 44;
      option.textContent = "Fourty-Four";
    } else {
      option.value = 4;
      option.textContent = "Four";
    }
    console.log("value: %s, text: %s", option.value, option.textContent);
  });

})();

<select id="amount">
  <option value="">Select One</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
</select>

<label><input type="checkbox" id="discount" />Discount</label>

_{另请参阅:document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.getelementbyid" rel="noreferrer noopener nofollow">getElementById()</a> , document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector" rel="noreferrer noopener nofollow">querySelector()</a> , 和 EventTarget.<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="noreferrer noopener nofollow">addEventListener()</a>}