根据输入的邮政编码生成城市状态下拉列表答案

【问题标题】：Generate city state dropdown based on zipcode entered根据输入的邮政编码生成城市状态下拉列表
【发布时间】：2019-09-14 22:43:45
【问题描述】：

我有 2 个下拉城市和州以及邮政编码文本框。我需要根据输入的邮政编码生成城市和州下拉菜单。当用户输入邮政编码时，我将邮政编码传递给我的 API 以获取州/城市列表。使用下面的代码，我可以从我的 API 中获取数据，并且可以在控制台中看到州/城市，但我无法在下拉菜单中显示。我不确定我错过了什么。如何在下拉列表中显示数据。

API 控制器：

public class Getstatelist : ApiController
{

    // GET api/Getstatelist/5
    public List<CityState> GetCityState(string zipEntered)
    {
        var list = new List<CityState>();

        if (string.IsNullOrEmpty(zipEntered) || zipEntered.Length < 2)
            return list;

        zipEntered += "%";

        using (var connection = new OracleConnection(ConfigurationManager.ConnectionStrings["MY_DB_CONNECTION_STRING"].ConnectionString))
        {
            connection.Open();

            var sqlQuery = "select state from state_city_data where zip like :zipEntered";
            using (var command = new OracleCommand(sqlQuery, connection))
            {
                command.BindByName = true;
                command.Parameters.Add("zipEntered", OracleDbType.Varchar2).Value = zipEntered;

                using (var reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        list.Add(new CityStateZip
                        {
                            State = reader["STATE"] != DBNull.Value ? Convert.ToString(reader["STATE"]) : null,
                        });
                    }
                }
            }
        }

        return list;
    }
}

   $(document).ready(function ()
        {
            $("#zip").keyup(function () {
                var el = $(this);

                if (el.val().length === 5) {
                    $.ajax({
                        type:'GET',
                        url: "../api/Getstatelist/" + el.val(),
                        success: function (html) {
                            console.log(html);
                            $('#state').html(html);
                        }
                    }); 
                }else{
                    $('#state').html('<option value="">Enter Zip code first </option>');
                    
                }
            });
  });

<div>
            <div class="city-wrap">
                <select id="city">
                    <option value="">Select City first</option>
                </select>
                <label for="city">City</label>
            </div>
            <div class="state-wrap">
                <select id="state">
                    <option value="">Select State </option>
                </select>
                <label for="state">State</label>
            </div>
            <div class="zip-wrap">
                <input type="text" pattern="[0-9]*" maxlength="5" required name="zip" id="zip" >
                <label for="zip">Zip</label>

            </div>
        </div>

【问题讨论】：

“我可以在控制台中看到州/城市” - 因为您有一个 console.log(html); 电话 - “但我无法在下拉菜单中显示. 我不确定我错过了什么。” - 将值实际添加到控件的代码？
您必须准备 html 格式的响应（选择选项），并且您必须将其附加到您的 html 文件中。示例响应格式：res = ""

标签： c# jquery asp.net-ajax

【解决方案1】：

为了填充状态下拉，你需要在 ajax 中修改你的成功回调如下：

$.each(html,function(key,value){
$('#state').append($('<option></option>').val(value.State).html(value.State));
});

对于城市下拉也类似：

$.each(html,function(key,value){
$('#city').append($('<option></option>').val(value.City).html(value.City));
});

【讨论】：