Создать выпадающий список штата на основе введенного почтового индекса

Question

У меня есть 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>

Answer 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));
});