DropDownListコントロール

DropDownListコントロール

　DropDownListコントロールはWebページにドロップダウンリストを表示します。

■　主なプロパティ

プロパティ名 概要
Items DropDownListコントロールの項目のコレクションを取得する
SelectedIndex DropDownListコントロール内の選択された項目のインデックスを取得・設定する
SelectedItem DropDownListコントロール内の選択された項目を取得・設定する
SelectedValue DropDownListコントロール内の選択された項目の値を取得・設定する
DropDownListの主なプロパティ

■　主なイベント

イベント名 概要
SelectedIndexChanged DropDownListコントロール内の選択項目が変更されたときに発生する
DropDownListの主なイベント

　ドロップダウンリストでは、複数の項目からひとつの項目を選択することができます。選択された項目は、SelectedItemプロパティによって取得できます。また、DropDownListに項目を追加するには、Itemsプロパティのコレクションの持っているAddメソッドを実行します。

プロジェクトの種類 ASP.NET Webアプリケーション
プロジェクト名 DropDownListTest

サンプルダウンロード

○　デザイン

　Webフォームを追加して、次の図のように各コントロールを配置してください。

コントロールの配置例
コントロールの配置例

　デザイナーでDropDownListの項目を追加するには、プロパティウィンドウよりItemsプロパティのボタンを押し、次の図のようなダイアログを表示します。そして、「追加」ボタンで項目を追加し、「Text」プロパティに項目名を設定します。

項目の追加
項目の追加

○　プログラム

　次のように各イベントハンドラを記述してください。dlBottom_SelectedIndexChangedイベントは、dlBottomをダブルクリックするとスケルトンが表示されます。

index.aspx.vb

  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2. 　'ポストバックのときは実行しないようにする
  3. 　If Me.IsPostBack Then
  4. 　　Return
  5. 　End If
  7. 　'ドロップダウンリストに項目を追加する
  8. 　Me.dlTop.Items.Add("日本")
  9. 　Dim li As New ListItem("アメリカ", "us")
  10. 　Me.dlTop.Items.Add(li)
  11. 　Me.dlTop.Items.Add(New ListItem("中国", "ch"))
  12. End Sub
  14. Protected Sub btnSend_Click(sender As Object, e As EventArgs) Handles btnSend.Click
  15. 　'選択内容をラベルに表示
  16. 　Me.lblMessageTop.Text = Me.dlTop.SelectedValue & "が選択されました。"
  17. End Sub
  19. Protected Sub dlBottom_SelectedIndexChanged(sender As Object, e As EventArgs) Handles dlBottom.SelectedIndexChanged
  20. 　'選択内容をラベルに表示
  21. 　Me.lblMessageBottom.Text = Me.dlBottom.SelectedValue & "が選択されました。"
  22. End Sub

○　実行結果

実行結果
実行結果

○　解説

　6~8行目では、ポストバックのときにPage_Loadイベントを実行しないようにしています。この処理を追加しないと、ポストバックのたびにdlTopに項目が追加されてしまいます。

　11~14行目ではdlTopに項目を追加しています。3つの方法で追加しています。11行目では、itemsプロパティのAddメソッドの引数に項目名を渡す方法です。12行目では項目を表わすListItemオブジェクトを生成して13行目で追加しています。14行目では、追加するときにListItemオブジェクトを生成しています。

　19、24行目では選択した項目をそれぞれのLabelコントロールに表示しています。

前へ   次へ