删除 selected select 元素的默认选项 onChange 事件？

Question

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

当 selected 项目在 select 中发生变化时，我想从那个 select 元素而不是其他元素中删除默认选项。

目前的问题是，当我更改一个 Select 中的 selected 项目时，默认选项从 both Select秒。它应该只从触发更改事件的控件中删除。

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

如何仅删除 selected select 元素的默认选项？

所以在标记中我定义了两个 select 元素，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();
}

删除 selected select 元素的默认选项 onChange 事件？

Remove default option onChange event of selected select element?

jquery

html

jquery-selectors

html-select