[Javascript] SELECTタグの追加と削除と変更のスマートなコーディング

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBシステムを作っていると、入力フォームの動的対応からは逃げられません。
 

textフォームの文字列変更をするのは比較的ラクなのですが、面倒くさいのがselectタグの扱いです。
 

selectタグにoptionタグを追加する時に、appendChildして、削除する時にremoveChildしてもいいのですが、このやり方以外にoptionsを使ったやり方をまとめておきたかったので、記事に残しておきます。
 

サンプルHTML

追加処理

 

selectタグのoptionsでoptionタグの一覧が取得できます。
このlengthの値は配列+1の値が返ってくるので、それに新しくoptionを作る処理を”new Option”の1命令で作成できます。
 

createElement(“option”)でタグを作って、appendChildするよりはかなり短縮化できてスマートなコードになります。

削除処理

 

削除はremoveプロパティを使って、簡単に行なえます。
 

今回は、選択されている項目を削除するようにしましたが、何番目という指定でもできるので、当てはめる数値はその都度対応するといいでしょう。

変更処理

 

表示テキストの値を入れ替えるのは、textプロパティに値を代入(変更)してあげるだけです。
key値を入れ替えたい場合は、.valueプロパティの値を上書きしてあげましょう。

選択項目の抽出

テスト実行

codepenに入れておいたので、動作をテストしてみてください。
 

See the Pen
Select-tag
by YugetaKoji (@geta1972)
on CodePen.


 

Leave a Reply

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