Изменить значение опции выбора на основе флажка

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