I have a drop down and a list group box. on the drop down change event I need to remove all the items and add new items.
Below is the list group box
<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>
This is my try at JavaScript
$('#ddlRegion').change(function (e) {
$(".list - group - available - items")
.find('option')
.remove();
});
In simple remove, we can try to use empty all of option
$(".list-group-available-items").empty();
or use remove by option like
$(".list-group-available-items option").remove();
if we need to append new option after remove all option we can try to use 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>You need to first empty the existing list with .empty() and then append new options with 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>');
});