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タグの最後に追加するというような処理です。私はよく使いますがあまり見かけないので突然ですが書いてみました。管理系の画面ではなかなかこの手のスクリプトは重宝するんですよ意外と。
ぜひ機会があったら使ってみてくださいね。
和田憲幸の広告
- 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新潟で注文住宅とリフォームはネオハウス。
