Question

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

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

目前的问题是，当我在一个选择中更改所选项目时，默认选项将从两者选择中删除。只应将其从触发更改事件的控件中删除。

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

如何删除仅所选选择元素的默认选项？

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

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

1 个答案: