Tengo un menú desplegable y un cuadro de grupo de lista. en el evento de cambio desplegable, necesito eliminar todos los elementos y agregar nuevos elementos.
A continuación se muestra el cuadro de grupo de lista
<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>Este es mi intento en JavaScript
$('#ddlRegion').change(function (e) { $(".list - group - available - items") .find('option') .remove(); });En la eliminación simple, podemos intentar usar la opción de empty todo
$(".list-group-available-items").empty(); o use remove por opción como
$(".list-group-available-items option").remove(); si necesitamos agregar una nueva opción después de eliminar todas las opciones, podemos intentar usar 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>Primero debe vaciar la lista existente con .empty() y luego agregar nuevas opciones con 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>'); });