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

入力フォームでよく登場する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");