selectに対して動的に値を追加

突然ですがたまには役に立つエントリをね。Javascriptネタです。

2010-01-29 21:43:46
入力時間 / 10:32

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タグの最後に追加するというような処理です。私はよく使いますがあまり見かけないので突然ですが書いてみました。管理系の画面ではなかなかこの手のスクリプトは重宝するんですよ意外と。

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

TAG

P.487