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

2019年9月2日

Javascript テクノロジー プログラミング

t f B! P L
WEBシステムを作っていると、入力フォームの動的対応からは逃げられません。 textフォームの文字列変更をするのは比較的ラクなのですが、面倒くさいのがselectタグの扱いです。 selectタグにoptionタグを追加する時に、appendChildして、削除する時にremoveChildしてもいいのですが、このやり方以外にoptionsを使ったやり方をまとめておきたかったので、記事に残しておきます。

サンプルHTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select</title> </head> <body> <select class="test"> <option value="id-1">test-001</option> <option value="id-2">test-002</option> <option value="id-3">test-003</option> <option value="id-4">test-004</option> <option value="id-5">test-005</option> </select> <button type="button" class="add">Additional</button> <button type="button" class="del">Delete</button> <input type="text" name="txt"><button type="button" class="edit">Change</button> <script src="select.js"></script> </body> </html>

追加処理

button_add.addEventListener("click" , function(){ var sel = document.querySelector("select"); var text_edit = document.querySelector("input[name='txt']"); var txt = (text_edit.value !== "") ? text_edit.value : (+ new Date()); var key = (+ new Date()); sel.options[sel.options.length] = new Option(txt , key); },false); selectタグのoptionsでoptionタグの一覧が取得できます。 このlengthの値は配列+1の値が返ってくるので、それに新しくoptionを作る処理を"new Option"の1命令で作成できます。 createElement("option")でタグを作って、appendChildするよりはかなり短縮化できてスマートなコードになります。

削除処理

button_del.addEventListener("click" , function(){ var sel = document.querySelector("select.test"); sel.remove(sel.selectedIndex); },false); 削除はremoveプロパティを使って、簡単に行なえます。 今回は、選択されている項目を削除するようにしましたが、何番目という指定でもできるので、当てはめる数値はその都度対応するといいでしょう。

変更処理

button_edit.addEventListener("click" , function(){ var sel = document.querySelector("select.test"); var text_edit = document.querySelector("[name='txt']"); sel[sel.selectedIndex].text = text_edit.value; text_edit.value = ""; },false); 表示テキストの値を入れ替えるのは、textプロパティに値を代入(変更)してあげるだけです。 key値を入れ替えたい場合は、.valueプロパティの値を上書きしてあげましょう。

選択項目の抽出

select.selectedIndex -> 現在選択されている配列の順番を返します。 select.selectedOptions -> 現在選択されているopotionタグを配列で返します。(multipleの場合のみ複数配列)

テスト実行

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

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

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ