根據復選框更改選擇選項的值

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. getElementById() document. getElementById() ， document. querySelector() document. querySelector()和EventTarget. addEventListener() 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());
});