How to Select an Item in a Drop Down Box & Display the Results in the List Box

Written by kevin lee
  • Share
  • Tweet
  • Share
  • Email

List boxes and drop down boxes are just a few of the controls you may find on an ASP.NET web page. ASP.NET is Microsoft's development language. It allows developers to create powerful Web applications quickly using the Visual Studio coding environment. Drop down boxes are ideal tools for displaying large amounts of information in a small amount of space. Users simply click a drop down box and select an item from a wide range of choices. By adding an event handler to your drop down box, you can copy a selected value into a list box.

Skill level:


    Add Controls to Web Form

  1. 1

    Launch Microsoft Visual Studio. Click the "File" button and then click "New Website."

  2. 2

    Click "Visual C#" to highlight it, and double-click "ASP.NET Web Site" to create a website project. The code for a default Web page named "Default.aspx" appears in the code window.

  3. 3

    Click the "Design" button at the bottom of that window to switch to design view. This view allows you to place controls onto the Web form using the Toolbox.

  4. 4

    Click "View" and then click "Toolbox" to display the Toolbox. Locate the "DropDownList" control and double-click it. It will appear on the Web form. Visual Studio names it "DropDownList1." Microsoft calls drop down boxes "DropDownLists" in Visual Studio.

  5. 5

    Return to the Toolbox and double-click the "ListBox" control to place it on the form. Visual Studio names it "ListBox1." The "ListBox" control is equivalent to the list box you see in regular HTML.

    Modify Code

  1. 1

    Press "F7" to view the Web form's C# code window.

  2. 2

    Locate the "Page_Load" method within that code window. Paste the following text inside that method:

    DropDownList1.AutoPostBack = true;




    This first line of code sets the DropDownList control's AutoPostBack property to "true." This is important because the control needs to communicate with the web server every time a user selects a new item from the control. The next three lines add new items to the DropDownList control.

  3. 3

    Press "Shift" + "F7" to switch back to design view.

  4. 4

    Right-click the DropDownList control and select "Properties" to open the "Properties" window. This window allows you to set properties and event handlers for the DropDownList.

  5. 5

    Click the lightning bolt symbol at the top of the "Properties" window. Double-click the "SelectedIndexChanged" item. The code window opens and displays the method that runs whenever someone selects a new item in the DropDownList control. Replace that code with the following code:

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)


    string selected Item = DropDownList1.SelectedItem.ToString();



    The variable named "selectedItem" holds the value of the item that a user selects from the DropDownList control. The next statement adds that item to the ListBox control using the "Add" method.

  6. 6

    Press "F5" to run the project. Your browser will open and display the Web page.

  7. 7

    Click the DropDownList control and select one of the items. Your action will cause the code to run and copy that item to the ListBox control.

Tips and warnings

  • When you press "F5" to run the project, Visual Studio might ask if you would like for it to modify the project's "web.config" file. Click "Yes" if you see that message. This allows your application to function using the default web.config.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.