Question

如果用户选中复选框，是否可以更改select选项的值。如果用户从选择选项中选择“四”，则其默认值为“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.getElementById()，document.querySelector()和EventTarget.addEventListener()}

Answer 2

如果我理解正确，如果你可以使用jQuery，它应该是可能的。

由于您需要选项且值为“44”，因此当用户选中/取消选中复选框时，您需要动态添加/删除此选项。

我准备了一个简单的例子，它应该对你有所帮助：

https://jsfiddle.net/qv9nxhov/

$('select').on('change', function() {
    //show current value
    $('.result').text($(this).val());

    //remove discount when choose other option
    $('select option[value="44"]').remove();
    $('input').attr('checked', false);
});

$('input').on('click', function() {
    //check if checkox is checked    
    if ($(this).is(':checked')) {
        //add extra option
        $('select').append('<option value="44" selected="selected">Discount</option>');
    } else {
        //remove extra option
        $('select option[value="44"]').remove();
    }
    //show current value
    $('.result').text($('select').val());
});

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

2 个答案: