[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>

$(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>

<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/

参考サイト

関連記事