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開発の効率や、ユーザビリティを上げてくれそうです。