How to edit a html select element in Experience editor - MVC

Question

I'm using Sitecore 8.2 with MVC, and want to know the correct way to make a select element editable in Experience editor.

Following the instructions here -

created a custom button "Edit City" in core database, but it isn't showing up in Editor when this rendering is selected. The binding works fine in preview mode.

When the page is opened in Exp.Editor, there are 10 rows (I have 10 cities) under that dropdown, that say {"commands":[{"click::"chrome:common:edititem.....

Followed these steps to render the element.

controller:

public ActionResult RenderCitySelector()    
{    
  IEnumerable<Item> cities = ItemExtensions.GetDatasource().Children;
  return View("~/Views/cities.cshtml", cities);    
}

View:

@model IEnumerable<Item>

using (Html.BeginEditFrame(Html.Sitecore().CurrentRendering.DataSource, 
"/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Custom Buttons/Edit City"))    
{    
  <select id="ddlCity">    
  @if (Sitecore.Context.PageMode.IsExperienceEditorEditing)    
  {    
    foreach (Item city in Model)    
    {    
      <option value="@Html.Sitecore().Field(Templates.Fields.CityCode, city)">
      @Html.Sitecore().Field(Templates.Fields.CityName, city)
      </option>   
    }    
  }    
  else
  {    
   foreach (Item city in Model)
   {    
    <option value="@city.Fields[Templates.Fields.CityCode].Value">
    @city.Fields[Templates.Fields.Cityname].Value
    </option>
   }    
  }    
</select>    
}

Answer 1

This should go into comment, but cannot suggest code in comment, so writing as an answer

Could you try below?

@model IEnumerable<Sitecore.Data.Items.Item>

@if (!Sitecore.Context.PageMode.IsNormal)
{
    using (Html.BeginEditFrame(Html.Sitecore().CurrentRendering.DataSource,
        "/sitecore/content/Applications/WebEdit/Edit Frame Buttons/Custom Buttons/Edit City"))
    {
        foreach (Item city in Model)
        {
           EditCity : @Html.Sitecore().Field(Templates.Fields.CityName, city)
        }
    }
}
else
{
    foreach (Item city in Model)
    {
        <select id="ddlCity">
            <option value="@city.Fields[Templates.Fields.CityCode].Value">
                @city.Fields[Templates.Fields.Cityname].Value
            </option>
            }

        </select>
    }
}