Question

我在ascx文件中有2个选择字段：

<%=Html.DropDownList("CityID", new SelectList(Model.Cities, "Code", "Name"), new Dictionary<string, object>
                   {
                        {"class", "styled"}                                                                            
                   })
                %>



<%=Html.DropDownList("EstablishmentID", new SelectList(Model.Establishments, "OID", "Name"),
                                     "All Establishment", new Dictionary<string, object>
                    {
                         {"class", "styled"}                                                                          
                   })
                %>

当用户在EstablishmentId中选择新值时，我希望CityID的值会发生变化我怎么能这样做？
感谢。

PS。 ViewEngine为WepPages。

Answer 1

 cascading Country and state DDL
    @Html.DropDownListFor(model => model.CountryId, Model.CountryList, "--Select Country--", new { @class = "CountryList", style = "width:150px" })

     @Html.DropDownListFor(model => model.StateId, Model.StateList, "--Select State--", new { @class = "StateList", style = "width:150px" })

    <script type="text/javascript">
        $(document).ready(function () {
            $.post("/Client/GetModels", { id: $(".CountryList").val() }, function (data) {
                populateDropdown($(".StateList"), data);
            });
            $(".CountryList").change(function () {
                $.post("/Client/GetModels", { id: $(this).val() }, function (data) {
                    populateDropdown($(".StateList"), data);
                });
            });
        });

        function populateDropdown(select, data) {
            $(".StateList").empty();
            $.each(data, function (id, option) {
                $(".StateList").append("<option value='" + option.StateId + "'>" + option.State + "</option>");
            });
        }
    </script>

Answer 2

        Try this
        In view
            <div class="popup_textbox_div" style="padding: 0pt;">
             <%=Html.DropDownList("CityId", new SelectList(Model.Cities, "Code", "Name", 0), "---Select City---", new { @class = "popup_textbox popup_dropdown valid" })%>
             </div>

              <div class="popup_textbox_div" style="padding: 0pt;">
              <select class="popup_textbox popup_dropdown valid" id="OID" name="Name">
                 <option>---All Establishment---</option>
             </select>
             </div>
    Add the script

    <script type="text/javascript">
    $(function () {
        $("#CityId").change(function () {
             var cityId = $("#CityId").val();

            if (!isNaN(cityId) && ( cityId > 0) && ( cityId != null)) {

                GetEstablishmentsByAjax(cityId);
            }
            else {
                $("#OID").html("<option value=''>---All Establishment---</option>");

            }
        });
    });

    GetEstablishmentsByAjax(cid) {

        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            url: "/trail/selectestablishment/" + cid.toString(),
            data: "",
            dataType: "json",
            success: function (data) {

                if (data.length > 0) {

                    var options = "<option value=''> --All Establishment---</option>";
                    for (s in data) {
                        var type = data[s];
                       options += "<option value='" + type.Value + "'>" + type.Text + "</option>";
                    }
                    $("#OID").html(options);

                }

            }
        });
    }
     </script>

In TrailController

public ActionResult selectestablishment(int? id)
        {
                SelectList establishments = null;
                var estb = //put ur code and get list of establishments under selected city
                 establishments = new SelectList(estb, "OID", "Name");
                 return Json(establishments, JsonRequestBehavior.AllowGet);

        }

DropDownList之间的依赖关系

2 个答案: