DropDownList に要素を追加する

DropDownList (ドロップダウンリスト) に要素を追加する手順を紹介します。

Webフォームデザイン時に追加する場合

Webフォームの画面のデザイン時に要素を追加する場合の手順です。

ASP.NETアプリケーションを新規作成します。Webフォームを追加し、開きます。下図のデザイン画面が表示されます。(コード画面が表示された場合はコードウィンドウの下部のタブから[デザイン]タブをクリックしてデザイナ画面を表示します。)
DropDownList に要素を追加する:画像1

ツールボックスを表示します。ツールボックスから[DropDownList]をクリックして選択します。
DropDownList に要素を追加する:画像2

デザイン画面にドラッグ&ドロップします。DropDownListがWebフォームに追加されます。
DropDownList に要素を追加する:画像3

プロパティウィンドウ(下図の右下枠)の[Items]プロパティを編集します。[Items]プロパティの(コレクション)の右側の[...]ボタンをクリックします。
DropDownList に要素を追加する:画像4

ListItemコレクションエディターが開きます。
DropDownList に要素を追加する:画像5

左側の[メンバー]枠の[追加]ボタンをクリックします。メンバー欄に要素が追加されます。
DropDownList に要素を追加する:画像6

右側の[プロパティ]枠のTextプロパティの欄に"ペンギン"を入力しました。入力を確定するとValueにも同じ値が設定されます。(下図参照)
DropDownList に要素を追加する:画像7

メンバー欄の[追加]ボタンをクリックす要素を追加します。"ペンギン","ラクダ","クジラ","イルカ"の要素を追加しました。追加後[OK]ボタンをクリックし、コレクションエディターのウィンドウを閉じます。
DropDownList に要素を追加する:画像8

Webフォームのデザイン画面に戻ります。DropDownListの表示が更新されています。
DropDownList に要素を追加する:画像9

実行結果

プロジェクトを実行します。Webブラウザが起動し下図の画面が表示されます。
DropDownList に要素を追加する:画像10

DropDownListを展開します。先ほど追加した要素が一覧に表示されています。
DropDownList に要素を追加する:画像11

他の要素を選択できました。
DropDownList に要素を追加する:画像12

コードで追加する場合

プログラムのコードで要素を追加する場合の手順です。
先の方法でDropDownListに要素の追加ができますが、要素の内容がページの状態やオプションによって動的に変わる場合があります。コードを利用して動的にDropDownListに要素を追加する手順を紹介します。

ASP.NET Webアプリケーションのプロジェクトを作成します。作成後Webフォームを追加します。
DropDownList に要素を追加する:画像13

ツールボックスからDropDownListをドラッグ&ドロップします。WebフォームにDropDownListが追加されます。
DropDownList に要素を追加する:画像14

Webフォームをダブルクリック、または、Webフォームを選択し、プロパティウィンドウの"Load"イベントをダブルクリックし、ページのLoadイベントハンドラの編集をします。
DropDownList に要素を追加する:画像15

コード

以下のコードを記述します。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DropDownListDemo
{
  public partial class AddItemsFromCode : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {
      DropDownList1.Items.Add("ペンギン");
      DropDownList1.Items.Add("フクロウ");
      DropDownList1.Items.Add("にわとり");
      DropDownList1.Items.Add("ペリカン");
    }
  }
}

参考

TextとValueを明示的に指定する場合はLoadイベントのコードを下記のコードに変更します。
protected void Page_Load(object sender, EventArgs e)
{
  ListItem li = new ListItem("ペンギン", "ペンギン");
  DropDownList1.Items.Add(li);
  li = new ListItem("フクロウ", "フクロウ");
  DropDownList1.Items.Add(li);
  li = new ListItem("にわとり", "にわとり");
  DropDownList1.Items.Add(li);
  li = new ListItem("ペリカン", "ペリカン");
  DropDownList1.Items.Add(li);
}
DropDownList に要素を追加する:画像16

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。
DropDownList に要素を追加する:画像17

ドロップダウンリストをクリックします。下図の要素一覧が表示されます。コードで追加した要素が一覧に表示されています。
DropDownList に要素を追加する:画像18

他の項目に選択を変更できます。
DropDownList に要素を追加する:画像19
AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2014-04-15
Copyright © 1995–2025 iPentec all rights reserverd.