jQueryを使わない方法「Select要素に値を追加する」

2015年1月20日

Javascript Tips プログラミング

入力フォームでよく登場するselectタグ。 最近はradioボタンで中身を見える化することがEFOとして最適とか言われているが、 モバイルなど、小さい画面では、selectなどの、コンパクト化できるUIの方が、好まれる場合もある。

概要

特定の操作によりselect内容が変わるような場合、今回は追加に関してライブラリサンプルを書いてみた。

仕様

param @ e : 対象エレメント param @ val : value属性値 param @ txt : 表示文字列 (text) param @ title : (null ok)

Code

(function(){ var $$={}; //select項目操作; $$.formAddSelect = function(e, val , txt , title){ if(typeof(e)=='undefined' || e==null || !e){return} var num = e.length; //txt,val 設定; e.options[num] = new Option(txt , val); //title値; if(title){ e.options[num].title = title; } }; //グローバル変数へ格納 window.$$LIB = $$; //プログラム構造を返す(別変数に格納できる) return $$; })();

使い方

$$LIB.formSelectAdd(document.getElementById("hoge"),"100","fuga");

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。