将城市和世界各国添加到HTML5表单的最简单方法是什么？

Question

我正在创建一个表单，我想让用户选择他们的国家和他们的城市。最有效的方法是什么？

Answer 1

对于州和国家这样的事情，可能的数量足够小，你可以为此建立下拉菜单而不会有太多的麻烦。 Here是jQuery的插件，其中包含预先制作的“国家/地区选择器”，您可以轻松地在Google上找到相同的状态。

当你开始谈论城市时，它们的数量非常多。在我看来，你最好使用一个简单的textbox来让用户自己填充它。

修改 以下是从MVC中的数据库构建国家/地区列表的示例：

国家/地区类（型号）

//This class represents a Country
public class Country
{
    public int CountryID { get; set; }
    public string CountryName {get; set; }

    public Country(int countryID, string countryName)
    {
        this.CountryID = countryID;
        this.CountryName = countryName;
    }
}

<强>控制器

List<Country> countries = new List<Country>(); //Create a list of Country objects
IEnumerable<SelectListItem> countryList; //List to hold the values for the dropdownlist
SqlConnection connection = new SqlConnection(connectionString); //build a connection with your connection string

connection.Open();
SqlCommand query = new SqlCommand("SELECT CountryID, CountryName FROM Country", connection); //query the table
query.CommandType = CommandType.Text;

SqlDataReader reader = query.ExecuteReader(); //execute the query

while (reader.Read()) //read out the results, set each result to a Country object
{
    Country country = new Country(
        Convert.ToInt32(reader["CountryID"]),
        reader["CountryName"].ToString());

        countries.Add(country); //add to the initial list
}
connection.Close();

//build the list of <SelectListItem>s to pass to the view
countryList = countries.Select(c => new System.Web.Mvc.SelectListItem
{
      Text = c.CountryName,
      Value = c.CountryID.ToString()
});

ViewBag.CountryList = countryList; //add the list to ViewBag

和视图

@Html.DropDownListFor(x => x.ID, new SelectList(ViewBag.CountryList, "Value", "Text"), new { @class = "formItem" })

此代码会在您的数据库中显示国家/地区列表，并从List<Country>构建SqlDataReader。然后我们将这些结果转换为List<SelectListItem>以传递到视图中。

结果是一个下拉列表，它将始终包含数据库中的所有记录。如果您添加/删除项目，列表将代表此项。

@Html.DropDownListFor(x => x.ID)将所选的Value绑定到模型的ID属性，因此您只需在POST上选择此值即可。 （请注意，您的模型需要包含ID属性才能生效！

编辑以强调制作城市选择者的“乐趣”：

我真的，真的建议不要试图建立一个城市选择器。查看list of cities in Kansas（我随机选择的内容）。我没有理会这些，但这是一个非常大的列表，而且仅在世界上一个国家中一个州。

如果你选择了一个数据库，你很容易就只有美国的数千条记录，只剩下195个其他国家的数据来构建数据。

也许您可以找到已经提供此信息的存储库，但实现此目标所需的工作量似乎过高。