和田憲幸のブログ

HTMLタグのselectは便利ですよね。データを「選択」させる事で様々な人的ミスを防いだり、オペレーションをより円滑にしてくれる便利なタグです。プログラムを書いている人はこのタグの恩恵を受けている人が多いのではないでしょうか。でも1点だけ欠点を挙げるなら「値の追加」ができないこと。

Windowsの標準UIの中には値を追加できるselectもあるんですけどね。HTMLに実装されているselectはその名が指し示す通り「選択しかできない」んです。でもJavascriptをちょっと書けばselectの中に値を簡単に追加することができるんです。候補はあるけど、その中にない場合。「その他」でエスケープはちょっとカッコ悪いですよね。

では以下がそのやり方。

01.selectのonchangeで関数をキック

onchange="selectAddValue(this)"
関数名は適当ですが。んでoptionの中のどれかに
値を追加する
こんな感じのを追加します。

02.selectAddValue関数をつくる

function selectAddValue(obj){
if(obj.value == "add"){
var addVal = prompt('値を入力してください','');
obj.options.length++;
obj.options[obj.options.length-1].value = addVal;
obj.options[obj.options.length-1].text = addVal;
obj.options[obj.options.length-1].selected = true;
}
}
こんな感じかな？

値を追加する

簡単に説明するとvalueがaddを選択した場合、promptという入力ダイアログを表示して受け取った値をselectタグの最後に追加するというような処理です。私はよく使いますがあまり見かけないので突然ですが書いてみました。管理系の画面ではなかなかこの手のスクリプトは重宝するんですよ意外と。

ぜひ機会があったら使ってみてくださいね。