删除所选选择元素的默认选项 onChange 事件？

Question

我在一个表单上有两个 HTML 选择元素。在当前设置中，两个选择的 默认选项 都是从数据库中读取的。

当所选项目在SELECT中更改时，我要从该选择元素中删除默认选项，而不是其他元素。

目前的问题是，当我在一个 Select 中更改所选项目时，默认选项会从 both Selects 中删除。仅应将其从触发更改事件的控件中删除。

我也尝试在每个独立更改事件上使用$('option:selected', this).remove();。但是此代码会在每次更改时从选择中删除一个项目。用例只需要删除默认选项。

如何删除只有 selected 选择元素的默认选项？

所以我在标记中定义了两个选择元素，ID 分别为 EventName 和 Status：

                                <!-- SELECT STATUS STATIC-->
                                <div class="form-group">
                                    <label class="col-md-9 control-label" style="text-align: left;" for="Current Status">Current Status</label>
                                    <div class="col-md-4">
                                        <select id="Status" name="Status" style="width:165px;" class="btn btn-default">
                                            @foreach (Models.RecStatus status in Model.Status)
                                            {
                                                <option value="@status.RecStatus">@status.RecStatus</option>
                                            }
                                        </select>
                                    </div>
                                </div>


                                <!-- SELECT EVENT STATIC-->
                                <div class="form-group">
                                    <label class="col-md-9 control-label" style="text-align: left;" for="Event">Event</label>
                                    <div class="col-md-4">
                                        <select id="EventName" name="EventName" style="width:165px;" class="btn btn-default">
                                            @foreach (Models.RecEvent eventType in Model.Event)
                                            {
                                                <option value="@eventType.EventType">@eventType.EventType</option>
                                            }
                                        </select>
                                    </div>
                                </div>  


//Remove the extra default Event and Status select elements
//onChange
$('#EventName').on('change', function() {
    //$('option:selected', this).remove();
    $("#defaultOption").remove();
});



$('#Status').on('change', function() {
    //$('option:selected', this).remove();
    $("#defaultOption").remove();
});

Answer 1

您可以根据它们的值删除它们

$('#EventName').one('change', function() {
    $(this).find("option[value='']").remove();
}

或者你可以删除最后一个选项

$('#EventName').one('change', function() {
    $(this).find('option:last').remove();
}