0
194
Vistas¿Cómo seleccionar automáticamente el valor de la lista desplegable en asp.net core mvc usando jquery o javascript?
El método aquí no está funcionando.
Aquí está mi cshtml:
<div class="form-group col-md-4"> <label for="inputState">City</label> <select id="City" class="form-control basic" asp-for="City" asp-items="@(new SelectList(ViewBag.Cities," Id","ZoneName"))" readonly="@(Model.IsView ? true : false)"> <option value="0" selected>Select</option> </select> </div>jquery
$("#CustomerName").change(function () { var CustomerName = $("#CustomerName").val(); $.ajax({ url: "../Ticket/FetchCustomerAddress", data: { userId: CustomerName }, type: "Get", success: function (data) { alert(data.city); //debugger; $('#City').val(data.city); }, error: function (err) { //console.error(err) //alert("Internal server error."); } }) }); Estoy completando la lista con las ciudades. Quiero seleccionar automáticamente la ciudad en la lista que obtengo de data.city
3 Respuestas
Responde la pregunta0
ASP genera nuevos ID para sus entradas en el lado del cliente,
Así que selecciona html se vería como
<select ID="City" class="form-control basic" asp-for="City" asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))" readonly="@(Model.IsView ? true : false)"> <option value="0" selected>Select</option> </select> la identificación generada para esto es: City.ClientID , por lo que para acceder a este seleccionado, su código js debería verse así
... success: function (data) { alert(data.city); //debugger; $("#<%=City.ClientID%>").val(data.city); }, ... tenga en cuenta que $("#<%=City.ClientID%>") --> es una nueva identificación generada que se imprimirá en el selector
0
puedes probar esto
$("#City option[value=data.city]").attr('selected', 'selected');0
$('#City').val(data.city); es la forma correcta de establecer el valor seleccionado para la lista desplegable.
Para este constructor: new SelectList(ViewBag.Cities,"Id","ZoneName")) , el primer parámetro es la fuente, el segundo parámetro es cada valor de opción en select, el tercer parámetro es que cada opción muestra texto en html.
Es decir, Id representa el valor de la opción y ZoneName representa el texto de la opción.
Cuando establece el valor para seleccionar, debe asegurarse de que el valor de data.city sea igual a cualquier valor de Id .
Código de prueba:
Modelo:
public class Test { public string City { get; set; } } public class City { public int Id { get; set; } public string ZoneName { get; set; } }Ver (Índice.cshtml):
@model Test <select id="CustomerName"> <option>custom1</option> <option>custom2</option> <option>custom3</option> </select> <div class="form-group col-md-4"> <label for="inputState">City</label> <select id="City" class="form-control basic" asp-for="City" asp-items="@(new SelectList(ViewBag.Cities,"Id","ZoneName"))"> <option value="0" selected>Select</option> </select> </div> @section Scripts { <script> $("#CustomerName").change(function () { var CustomerName = $("#CustomerName").val(); $.ajax({ url: "/Home/FetchCustomerAddress", data: { userId: CustomerName }, type: "Get", success: function (data) { alert(data.city); $('#City').val(data.city); }, error: function (err) { //console.error(err) //alert("Internal server error."); } }) }); </script> }Controlador:
public IActionResult Index() { ViewBag.Cities = new List<City>() { new City(){Id=1,ZoneName="aa"}, new City(){Id=2,ZoneName="bb"}, new City(){Id=3,ZoneName="cc"} }; return View(); } public IActionResult FetchCustomerAddress(string userId) { //do your stuff... return Json(new Test() { City = "2" }); }Vista de renderizado:
Datos de respuesta de Ajax (presione F12 en el navegador -> haga clic en el panel Network -> elija el nombre del método FetchCustomerAddress -> elija Response )
