selectボックスの中身は「jSelect」を活用してサーバで管理する開発方法
2009年04月28日-
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開発の効率や、ユーザビリティを上げてくれそうです。
最新のブログ記事(新着順)
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 過去のエントリ