Observation: Selected value behaviour of the DropDown list control

Today at work I observed a quite "nice" behaviour of the ASP.net DropDown list control. We usually have some kind of databinding mechanism for binding our domain model onto the UI. I was currently implementing / configuring the connections between UI elements and the appropriate model properties. The UI contained several, acutally three, DropDown controls, all of them having the same list of provinces as their data. After I connected the first DropDown control to our model data, the correct value was - as expected - automatically selected at startup and displayed. But then I noticed that strangely, all other DropDown controls had the same SelectedValue as the first DropDown, even without being databound yet! That was really strange. Initially I thought of a bug in our databinding mechanism, but since I didn't even configure the databinding for those fields, that couldn't be the case. So finally I went to check the method for loading these DropDowns that had been implemented by one of my working collegues. The code below is a dummy code that has a similar behaviour as the one I dealt with at work (of course with different data):

private void LoadDropDownLists()
{
    ListItem item = new ListItem(String.Empty, String.Empty);

    int i = 0;
    foreach (string myDataItem in dataElements)
    {
        item = new ListItem(myDataItem, i.ToString());

        ddlFirstDropDown.Items.Add(item);
        ddlSecondDropDown.Items.Add(item);
        ddlThirdDropDown.Items.Add(item);

        i++;
    }
}

Initially it didn't look strange at all (keep in mind that there are different strategies for loading DropDown controls, either in this way, by iterating over the data elements or by setting the DataSource directly). But then when I took a closer look at it I noticed the ListItem object that is created here and that the same reference of the same ListItem object is added to all the three DropDown lists. The loading of the data was correct because all three controls should contain the same list of data, but the problem was the creation of only one ListItem object. Because in this way, the same reference is stored on all three lists, and so when the databinding mechanism set the SelectedValue of the first DropDown control, also all the other controls have been set to that SelectedValue (because they point to the same object reference).
The best is to try the code below yourself, so you see the effect. I just posted the codebehind, so you have to create the appropriate page with the three DropDown boxes, but it shouldn't be too hard.

public partial class _Default : System.Web.UI.Page
{
    private string[] dataElements = new string[]{
    "item 1",
    "item 2",
    "item 3",
    "item 4"
};

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadDropDownLists();

        //this simulates some databinding mechanism which takes place just after the
        //page_load event here
        ddlFirstDropDown.SelectedValue = "1";
    }

    /// <summary>
    /// Loads the drop down lists.
    /// </summary>
    private void LoadDropDownLists()
    {
        ListItem item = new ListItem(String.Empty, String.Empty);

        int i = 0;
        foreach (string myDataItem in dataElements)
        {
            item = new ListItem(myDataItem, i.ToString());

            ddlFirstDropDown.Items.Add(item);
            ddlSecondDropDown.Items.Add(item);
            ddlThirdDropDown.Items.Add(item);

            i++;
        }
    }
}

---

Questions? Thoughts? Hit me up on Twitter