如何通过mvc sql server中的另一个下拉列表的值填充下拉列表

I have a dropdown populated with state. and another dropdown(city) should populate based on the selection of state. Any ideas?

我有一个填充状态的下拉菜单。另一个下拉列表(城市)应该根据状态的选择填充。什么好主意吗?

This is my model for city dropdown list:

这是我的城市下拉列表模型:

public List <SelectListItem> Add()
{
    List<SelectListItem> items = new List<SelectListItem>();
    connection();
    SqlCommand cmd = new SqlCommand("proccountry_dropdown1", con);
    cmd.CommandType = CommandType.StoredProcedure;
    cmd.Parameters.AddWithValue("@pstroperationflag", "S-city");
    con.Open();
    using (SqlDataReader sdr = cmd.ExecuteReader())
    {
        while (sdr.Read())
        {
            items.Add(new SelectListItem
            {
                Text = sdr["city"].ToString(),
                Value = sdr["city"].ToString()
            });
        }
    }
    con.Close();
    return items;
}

This is my SQL server code:

这是我的SQL server代码:

ELSE IF @pstrOperationFlag = 'S-city'
    BEGIN
        SET @strSqlQry  = 'SELECT city FROM '
        SET @strSqlQry  = @strSqlQry + 'country_dropdown1'
        PRINT @strSqlQry
        EXECUTE(@strSqlQry)
    END

2 个解决方案

#1

You need to make ajax call for fetching city details on-change event of state :

需要通过ajax调用获取状态更改时的城市详细信息:

Your View Page :

你的视图页面:

<script type="text/javascript">
    $(function () {
     // get region list
        $('#StateId').change(function () {
            $.getJSON('/Home/GetCityList/' + $('#StateId').val(), function (data) {
                var items = '<option>-Select City-</option>';
                $.each(data, function (i, region) {
                    items += "<option value='" + region.Value + "'>" + region.Text + "</option>";
                });
                $('#CityId').html(items);
            });
        });
 });
</script>

And Your Controller Action :

你的控制器动作:

  public JsonResult GetCityList(int? Id)
  {
    var citylist = _userService.GetAllCity().Where(p => p.StateId == Id).ToList();
     IEnumerable<SelectListItem> selectList = from s in citylist
                                                         select new SelectListItem
                                                         {
                                                             Value = Convert.ToString(s.Id),
                                                             Text = s.Name
                                                         };
     return Json(new SelectList(selectList, "Value", "Text"), JsonRequestBehavior.AllowGet);
   }

And your drop-down on view :

以及您的下拉视图:

 <td>@Html.DropDownList("StateId", new SelectList(Model.StateList, "Id", "Name"), "-Select State-", new { @class = "form-control" }) </td>
<td>@Html.DropDownList("CityId", new SelectList(Model.CityList, "Id", "Name"), "-Select City-", new { @class = "form-control" })</td>

#2

You can just place "$('#StateId').change(function () ... " code in $(document).ready(function(){....}); and it will work.

您只需输入“$('#StateId')”。改变(函数()……“代码在$(文档)时(函数(){ .... });它会工作。

#1