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.
0 件のコメント:
コメントを投稿