asp.net bootstrap select 列表组框删除项目

Question

我有一个下拉列表框和一个列表组合框。在下拉更改事件中，我需要删除所有项目并添加新项目。

下面是列表分组框

  <select style="max-height: 30vh; min-height: 30vh; width: 100%; border: 0;"
                        multiple="multiple"
                        class="list-group list-group-available-items overflow-auto">
                    @foreach (var listGroupOption in Model.OrderItems ?? new List<SelectListItem>())
                    {
                        <option value="@listGroupOption.Value" class="list-group-item">
                            @listGroupOption.Text
                        </option>
                    }
                </select>

这是我在 JavaScript

的尝试

$('#ddlRegion').change(function (e) {

            $(".list - group - available - items")
                    .find('option')
                    .remove();
        });

Answer 1

在简单的删除中，我们可以尝试使用empty所有选项

$(".list-group-available-items").empty();

或通过

等选项使用 remove

$(".list-group-available-items option").remove();

如果我们需要在删除所有选项后添加新选项，我们可以尝试使用append

$(".list-group-available-items option").remove();

$(".list-group-available-items").append($('<option>', { 
        value: 'newOption',
        text : 'newOption' 
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="list-group-available-items">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

Answer 2

您需要先使用 .empty() 清空现有列表，然后使用 append() 添加新选项：

const myButton = document.getElementById('btn');
        myButton.addEventListener('click', function(){
            $(".list-group-available-items").empty();
            $(".list-group-available-items").append('<option value="newval1">New Item 1</option>');
            $(".list-group-available-items").append('<option value="newval2">New Item 2</option>');
            $(".list-group-available-items").append('<option value="newval3">New Item 3</option>');
        });

asp.net bootstrap select 列表组框删除项目

asp.net bootstrap select list-group box remove items

javascript

c#

twitter-bootstrap

asp.net-core