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

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

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

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

487 / 1085 2010-01-29 21:43:46 / 入力時間 10分
Y2T
Y2Tさんこれは!? 知らない方法でした。
たしかにあまり見ないですね!
自分的に使う機会がありそうですのでありがたく使わせて頂きます。
こういう小ネタ大好きです!
jqueryばっかりに頼って自分がダメになってきてますので、もっと勉強しようと思います;
和田
和田さん>Y2Tさま
jqueryとかprototypeは便利ですものねぇ(笑)わたしは未だにあんまり使い方わからないですけど・・・。
新規コメント出力エリア
新着情報ここまで

和田憲幸の広告

BTOパソコン
www.pc-take.com自作PCやBTOパソコンの事ならシューマイが美味しい神奈川県は横浜のPC-takeにお任せください。
事業再生のSTP
www.s-tp.jp経営が苦しい、そんなときはSTPに経営相談や経営コンサルティングをご依頼ください。
ドライフラワー卸売り
www.coretrading.co.jpドライフラワーやプリザーブドフラワーの業務用卸売りならコアトレーディング。
通話録音装置 ネイクス
www.neix.co.jp通話録音装置や通話録音システムのことならネイクス。
インプラント 東淀川区上新庄
www.higashi.ne.jp東淀川区上新庄でインプラントや矯正歯科ならひがし歯科で決まり!
吉野川 ラフティング
www.safari-g.com四国は吉野川でラフティングやハイドロスピード、キャニオニングと言えばサファリだよね。
ホームページ制作 アルバイト
next-level.bizホームページ制作、Webデザイナーのアルバイト、SOHOのことはネクストレベルまでご相談ください。
札幌 美容室 アイウィル
www.aiwill.jp札幌市中央区で美容師をお探しの際はアイウィルまでお越しください。
WEBLOGS6.1.0
www.synck.jpこのブログはシンクテクニカのウェブログでつくられています
札幌 ホームページ制作
www.synck.com札幌でホームページ制作やWebアプリケーション制作ならシンクグラフィカへ。
iPhoneで内線電話
www.smartgate.biziPhoneやAndroidから内線電話が無料でかけれる。
新潟リフォーム
www.neohouse.jp新潟で注文住宅とリフォームはネオハウス。