根据下拉列表选择填充数据文本框(onChange)

本文关键字：onChange 文本 数据 下拉列表 选择 填充 | 更新日期: 2023-09-27 18:06:44

我正在使用ASP建立一个网站。NET MVC和实体框架。我有一个DB表与国家信息:

CountryID int;
ShortName nvarchar;
CountryCode nvarchar;

In my View我有:

<div class="editor-field"><%: Html.DropDownListFor(model => model.address.CountryID, Model.countriesList, "<--Select Country-->") %></div>
<div class="display-field"><%: Html.TextBoxFor(m => m.phone.CountryCode)%>></div>

传递给视图的列表是:

countriesList = new SelectList(countries, "CountryID", "ShortName");

更新 javascript代码:

<script src="/Scripts/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#address.CountryID").change(function()
    {
        $.get("/PersonalInfo/GetCountryCode", $(this).val(), function(data)
        {
            $("#phone.CountryCode").val(data);
        });
    });
});

和控制器方法:

public ActionResult GetCountryCode(int id)
    { 
        Country c = personalInfoRepository.GetUserCountryByID(id);
        string countryCode = c.PhoneCode;
        return Content(countryCode);
    }
</script>

我想做的是，每当用户从下拉菜单中选择不同的国家时，用相应的CountryCode填充显示字段。我知道ajax可以用来实现这一点，但不幸的是我没有经验。我将感谢任何帮助与代码或一些链接到简单的教程，为初学者。

是否有可能做到这一点，而不张贴回服务器，如果我通过一个国家codelist沿着国家列表?

根据下拉列表选择填充数据文本框(onChange)

这是一个很棒的教程，用3种不同的方法用ASP创建级联下拉框。. NET MVC - http://stephenwalther.com/blog/archive/2008/09/07/asp-net-mvc-tip-41-creating-cascading-dropdown-lists-with-ajax.aspx

填充文本框的概念与此类似。首先，您需要一个控制器动作，它将返回给定国家/地区的正确国家/地区代码:

public ActionResult GetCountryCode(int countryId)
{
    //logic to find country code goes here
    string countryCode = "1";
    return Content(countryCode);
}

现在你需要一些javascript来绑定到你的国家的变化事件下拉菜单，并通过ajax调用你的控制器动作。我推荐使用jquery:

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#address_CountryID").change(function()
        {
            $.get("/Countries/GetCountryCode", $(this).val(), function(data)
            {
                $("#phone_CountryCode").val(data);
            });
        });
    });
</script>
相关文章：