Javascript 选中时更改下拉列表内容

我已经向最终用户展示了一个droplist，默认情况下包含4项

（value=a，value=b，value=c，value=d）

。当用户单击复选框时，如果未选中返回默认状态，则下拉列表的内容将仅更改为2项

（value=a，value=b）

下面我使用隐藏div实现了这一点，但我想知道是否有更好的使用Jquery的方法，我已经搜索过了，无法使用let say if checked表示这些选项，否则表示默认。目前，我必须使用两个不同的下拉列表，这在表单中传递值时很尴尬

复选框

 <label for="optionChoice"><input class="optionChoice" type="checkbox" id="optionChoice"         name="optionChoice" value="YES" onClick="if(this.c.........

尝试只使用一个下拉列表（id=“serviceType”），然后根据复选框的状态添加或删除选项：

var detached;
$('#optionChoice').on('change', function() {
    var $el = $(this);

    if( $el.prop('checked') ) {
        detached = $('option[value="C"], option[value="D"]').detach();   
    } else {
       $('#serviceType').append(detached);
    }
});

工作小提琴：
您可以通过使用javascript检测复选框的状态来实现这一点。我可以向您展示使用jquery的方法。然后可以使用jquery的remove和append函数在下拉列表中添加和删除值。为了解决你的问题，你可以这样做

$('input[type="checkbox"]').click(function() {
    if( $(this).is(':checked') ) {
        $("#selectBox option[value='C']").remove();
        $("#selectBox option[value='D']").remove();
    } else {
        $('#selectBox').append('<option value="C">C</option>');
        $('#selectBox').append('<option value="D">D</option>');
    }
});

$（'input[type=“checkbox”]）。单击（函数（）{
如果（$（this）.is（':checked'））{
$（“#选择框选项[value='C']”）。删除（）；
$（“#选择框选项[value='D']”）。删除（）；
}否则{
$（'#selectBox'）。追加（'C'）；
$（'#selectBox'）。追加（'D'）；
}
});
这太神奇了，太简单了，我觉得自己很愚蠢。非常感谢。我将应用这个逻辑。
$('input[type="checkbox"]').click(function() {
    if( $(this).is(':checked') ) {
        $("#selectBox option[value='C']").remove();
        $("#selectBox option[value='D']").remove();
    } else {
        $('#selectBox').append('<option value="C">C</option>');
        $('#selectBox').append('<option value="D">D</option>');
    }
});