セレクトボックス最適化テンプレ
PCサイトをスマートフォンに最適化するときに、PC版ではボタンだったものをそのままベタッと
貼ると、画面が小さい故にボタンの押し間違えが起こってしまう。
ましてタッチパネルの性能がイマイチなAndroidはそれが頻繁に起こりうると思う。
したがって個人的にセレクトボックスが良いかな、と思っている。
(iOSはかっこよく整形してくれるし、Androidでもそこまで挙動の違いは無いから)
以下のようにすれば選択したオプションのvalueなりidなりを取ってきて
新しいWindowを開けたり出来る。リンクに飛ばしたい場合はlocation.hrefとかで。
html
<form id="test"> <select id="hoge"> <option>image_harady</option> </select> </form>
var elm = document.getElementById("hoge"); for(var i=0;i<5;i++){ var opt = document.createElement("option"); var id = i; var value = i; var text = i + "_test"; opt.id = id; opt.value = value; opt.text = text; elm.options[i+1] = opt; } function newWin(){ var urlFlagment = elm.value; window.open("http://" + urlFlagment);//ここは任意のURLを指定する }; elm.addEventListener("change", newWin, false);
これでセレクトボックスのオプションが変わったときに
リンク先に飛んだりする。
参考:画像ハラディ
http://wikiwiki.jp/domingo/?%B2%E8%C1%FC%A5%CF%A5%E9%A5%C7%A5%A3