Javascript

セレクトボックスを操作してみよう

セレクトボックスで選択された値を使って要素を作成、DOMツリーに追加していきます。

  • value
  • selectedIndex

value

・セレクトボックスでも同じように選んだ要素を下のリスト追加していくような挙動を作っていきます。

・まず、HTMLにセレクト要素の中にオプションで青、黃、赤という色を書いていきます。、その下にはボタンの追加とリストのulを書いておきましょう。

・JavaScriptではまずli要素を作っていきます。定数名はわかりやすく li にして createElement() を使ってあげれば OK ですね。

・select 要素で選択された値を使いたいので要素を取得しておきましょう。色を選択するので、定数名は color にして querySelector() で select 要素を取得してあげます。

selectedIndex

・li の textContent に値をセットしたいのですが、 select の場合 value プロパティで選択された値、そして selectedIndex プロパティで選択された値が何番目かを取得できるので、両方表示してみましょう。

・これをリストに追加すれば良いので、getElementByIdで ulのidを取得してあげて子要素の末尾に li を追加したいので appendChild() を使ってあげます。

・value の値にはタグの中身が使われるのですが、別の値にしたい場合は HTML のほうで value 属性を指定してあげれば OK です。

-Javascript