端くれプログラマの備忘録 jQuery [jQuery] セレクトボックスで選択したページにジャンプさせる (EasySelectBoxプラグイン使用)

[jQuery] セレクトボックスで選択したページにジャンプさせる (EasySelectBoxプラグイン使用)

デザイナがEasySelectBoxというjQueryプラグインを推してきたので、プラグインの挙動チェックを兼ねて、前回のエントリの内容をEasySelectBoxプラグインを使うように修正してみる。

<script type="text/javascript" src="js/easyselectbox-1.0.5.min.js"></script>
<script>
    $(document).ready(function(){
        $('#site').easySelectBox({
            onClick: function(data) {
                window.location.href = data.value;
                $(this).easySelectBox('option', data.value, true);
            }
        });
        $('#site').easySelectBox('select', 'http://google.com/', true);     //デフォルト
    });
</script>

<select id="site">
<option value="http://google.com/">Google</option>
<option value="http://twitter.com/">Twitter</option>
<option value="http://facebook.com/">Facebook</option>
</select>

参考サイト

GitHub – kosinix/easyselectbox: jQuery plugin for replacing html select with div element for easy styling with css
https://github.com/kosinix/easyselectbox

Easyselectbox.jsの使い方まとめ | Cly7796.net
http://cly7796.net/wp/javascript/plugin-easyselectbox/