Problem with Selected value and cascade DropDownList
a few seconds ago
Hello, i am a newby with mvc3 and razor and i try for long days to do somethins but i have not result.
I’m trying to relate two DropDownList, one for States, and other for Cities, so, when i select a state, the another dropdownlist is fill with the corresponding cities. And also, i want that both dropdownlist, at the beggining, have an specifict state and cities selected ( is for an edit form).
The code i have is…
View Code
<script type="text/javascript">
$(document).ready(function () {
$("#ddlProvincias").change(function () {
cambiaElementos($("#ddlProvincias").val());
});
cambiaElementos($("#ddlProvincias").val());
});
// Carga el ddlCiudades en función
// de la provincia que le llega como parámetro.
function cambiaElementos() {
id = $("#ddlProvincias").val();
var dd = document.getElementById("IdCiudad");
dd.options.length = 0;
dd.options[0] = new Option("Cargando...");
dd.selectedIndex = 0;
// Control de errores
$("#IdCiudad").ajaxError(function (event, request, settings) {
dd.options[0] = new Option("Seleccione una Provincia", 0);
});
// Obtenemos los datos...
$.post(
'@Url.Action("getCiudades")', // URL a la acción
{idProvincia: id }, // Objeto JSON con parámetros
function (data) { // Función de retorno exitoso
$.each(data, function (i, item) {
dd.options[i] = new Option(item.DescCiudad, item.IdCiudad);
});
dd.disabled = false;
});
}
</script>
@using ((Html.BeginForm("editarProveedor", "Proveedor", FormMethod.Post, new { id = "formAlta" })))
{ @Html.LabelFor(model => model.Provincia)
</div>
<div class="editor-field">
@Html.DropDownList("ddlProvincias", "Seleccione una Provincia")
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IdCiudad)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.IdCiudad, ViewData["ddlCiudades"] as SelectList)
@Html.ValidationMessageFor(model => model.IdCiudad)
<input type="submit" value="Editar" onclick="EditarProveedor()" />
}
The Controller Code is…
ViewData[“ddlProvincias”] = new SelectList(ProvinciaLogic.getProvincias(), “IdProvincia”, “DescProvincia”, item.ciudad.IdProvincia);
ViewData[“ddlCiudades”] = new SelectList(CiudadLogic.getCiudades(item.ciudad.IdProvincia), “IdCiudad”, “DescCiudad”, item.ciudad.IdCiudad);
The Javascript is running ok, and the corresponding selected value too, but the problem is when i put both together. Exist another posibility with razor?
Is there another way to do that? Can you help me?