Generate city state dropdown based on zipcode entered

Question

I have 2 drop-downs city and state and zip code textbox. I need to generate city and state drop-downs based on zip code entered. When a user enters zip code I am passing zip code to my API to get state/city list. with the below code I am able to get he data from my API and can see the state/city in the console but i not able to display in drop down. I am not sure what I am missing. How do I display data in drop drown list.

API controller :

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

For populating state drop down, u need to modify your success callback in ajax as follows:

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

For city drop down also similarly:

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