前の記事 ≪:2009年4月27日 管理人のブックマーク
次の記事 ≫:入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVa...

selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法

2009年04月28日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Plugin JQuery jSelect - Demonstration

selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法。



これまで select の組み立てはサーバ側でPHPなんかでループさせて行うのが当たり前と思っていました。
jSelect を使えば、XMLやJSON、配列等のフォーマットからなるデータをajaxで読み取ってselect ボックスを簡単に動的に作成できます。
JavaScriptで動的に作った方がよいケースも多そうなので、導入できそうな部分は取り入れたほうがよいかも。
ということで、jSelect とそのメリットをご紹介。

jselect は、たとえば、次のようなHTMLがあったとします

<select name="test">
    <optoin>loading....
</select>

で、$('#test').jselect({ /* options */ }); のようにjselectメソッドを呼び出すだけで、以下のようになるというものです。

<select name="test">
    <option value="0">Option Zero</option>
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
</select>

何がよいかというと、JSONやXMLでデータを返すAPIさえあれば、自由にselectの中身を書き換えられるという点。

API自体はMySQLからデータを取ってjsonに変更するといったものであれば、開発にさほど時間はかからなさそうです。
APIとのデータの分離もできるので、APIのデータを別の場所で再利用できるというメリットもありますし、MySQLなんかで管理していればデータの管理も容易というわけです。
データが多い場合なんかはPHPで配列でもっておいてループさせるより、よい方法だと言えそうです。

JavaScriptなので画面遷移なく切り替えられますし、チェックボックスに応じてそのままselectの中身を書き換えるなんてことも出来ますね。

うまく使えばWEB開発の効率や、ユーザビリティを上げてくれそうです。

関連の記事検索:jQuery, select, ライブラリ
スポンサード リンク

By.KJ : 2009年04月28日 07:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)