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

Is there is way to change the value of select option if user check the check box. If user select "four" from select option, its default value is "4".Now if user check the checkbox, select option value becomes "44".

如果用户选中复选框,是否有办法更改选择选项的值。如果用户从选择选项中选择“四”,则其默认值为“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

2 个解决方案

#1

Just modify the <option> when the checkbox changes:

只需在复选框更改时修改

(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>

_{See also: document.getElementById(), document.querySelector(), and EventTarget.addEventListener()}

另请参见:document.getElementById(),document.querySelector()和EventTarget.addEventListener()

#2

-2

if I understand you correctly, and if you can use jQuery it should be possible.

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

Since you need to have option with value "44" you need to add/remove this option dynamically, when user check/uncheck checkbox.

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

I prepared simple example, it should be helpful for you:

我准备了简单的例子,它应该对你有所帮助:

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());
});

#1