jQueryでセレクトボックスを動的生成・初期化する方法

タイトルの通り

セレクトボックス(select)の初期化するとき・・・

  • jQueryから動的に初期化したい
  • JavaScriptから動的に生成したい
  • 特定の動作で中身を変えたい

こういう セレクトボックスを動的生成をする方法 について。

自分への忘備録も兼ねてまとめてみたいと思います。

jQueryまたは素のJavaScriptを使ったやり方です。

jQuery版:セレクトボックスの動的生成コード例

まずはお馴染みjQueryでのやり方について。

連想配列から初期化するコードの書き方は次の通り

 

1.まず空のselect要素を作成

▼ たとえばHTML例

セレクトボックスごと生成もできます。

でも今回はselect要素定義済みということで・・・

 

2.セレクトボックスを配列から初期化

▼ 配列からoption要素を生成&追加する

このコードで大事なポイントは2つ

  • option要素の中身の配列
    => このコードの optionCntList  には中身のテキストを text  、value属性の値を value  というキーで定義している
  • 動的にoption要素を作成
    => option要素を動的に作り、先の optionCntList  からテキストやらvalue値を取り出して作成。あとは select.append(option);  として追加すればOK

これだけです。

 

ちなみに見た目と動作はこんな風になります。

▼ 初期化時の見た目

jQueryから動的生成したセレクトボックスの見た目。

▼ セレクトボックス操作の動作

jQueryから動的生成したセレクトボックスの動作例

動的初期化してる以外は普通のセレクトボックスです。

JavaScript版:セレクトボックスの動的生成コード例

お次は JavaScript単体で初期化する方法 について。

やっぱり jQuery が使えないと少し大変です。

その手順とコード例は次みたいにできます。

 

1.まず空のセレクトボックスを定義

▼ 先ほどと同じHTML

ココはさっきのjQuery版と同じ

 

2.配列からoption要素を追加するコード

▼ 例えばこのようなコード

できあがるセレクトボックスは先ほどと同じ。

でもJS単体だとコードが少し分かりにくいですね・・・

やっぱりjQueryの方がスマートな気がする

ここまでのまとめ

以上、動的にセレクトボックスを生成するやり方でした。

ファイル・DBから選択肢を動的生成するとかに役立ちそう。

ということで、ではまた。サヨウナラ($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください