Tengo un listbox que quiero que se actualice después de hacer un insert con una llamada Ajax, pero no logro hacerlo, cuando lo intento, salen los elementos del listbox duplicados.
Éstos son mis elementos de Asp
<asp:DropDownList ID="ddlUsers" runat="server" ClientIDMode="Static" CssClass="form-control"
ForeColor="Black">
</asp:DropDownList>
<div>
<div>
<label id="lblListaCorreos" class="form-control label label-success">Correos por lista</label>
<asp:ListBox ID="lstCorreosLista" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:ListBox>
</div>
</div>
Aquí lleno mi ListBox dependiendo del elemento seleccionado de un DropDownList
var elementoSeleccionado;
$('#ddlUsers').change(function () {
$('#lstCorreosLista').empty();
debugger
elementoSeleccionado = $('#ddlUsers option:selected').attr('value');
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: getBaseUrl() + "checklist.aspx/ListadoUsuariosAjax2",
data: "{'Lista':'" + elementoSeleccionado + "'}",
dataType: "json",
success: function (response) {
//$('#lstCorreosLista').append("<option value='0'>Correos</option>");
$.each(response.d, function (i, item) {
debugger
$('#lstCorreosLista').append($("<option></option>").val(item.Mail).text(item.Mail));
});
}
});
});
Aquí hago una llamada Ajax para hacer un Insert
$('#btnNuevoCorreo').click(function () {
debugger
elementoSeleccionado = $('#ddlUsers option:selected').attr('value');
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: getBaseUrl() + "checklist.aspx/AddMail",
data: "{'mail':'" + $("#txtNewMail").val() + "','lista':'" + elementoSeleccionado + "'}",
dataType: "json",
success: function (response) {
alert(response.d);
}
});
});
Quiero que cuando llegue al success de la llamada ajax del insert, mi listbox se actualice, pero no logro hacerlo, alguna idea