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

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">
Code:
               @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?