jQuery实现select选择框样式美化插件
2015-07-30 12:37:20  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 6579
• 0

本Demo是一款jQuery select下拉框插件、其主要是美化了select的功能、实现代码是基于jQuery实现的点击展开功能、可以做为下拉框菜单选择用途

其实我自己也很想把这个效果集成到我的博客上面、现在用手机访问我的博客菜单就是通过select来实现的

HTMl代码

<select class="selectbox" id="" name="">
    <option value="DD博客">DD博客</option>
    <option value="CSS3">CSS3</option>
    <option value="Javascript">Javascript</option>
    <option value="Ruby">Ruby</option>
    <option value="Python">Python</option>
    <option value="C++">C++</option>
</select>

jQuery代码

$('.selectbox').wrap('<div class="select_wrapper"></div>')
$('.selectbox').parent().prepend('<span>' 
    + $(this).find(':selected').text() +'</span>');
$('.selectbox').parent().children('span').width($('.selectbox').width());
$('.selectbox').css('display', 'none');					
$('.selectbox').parent().append('<ul class="select_inner"></ul>');
$('.selectbox').children().each(function(){
    var opttext = $(this).text();
    var optval = $(this).val();
    $('.selectbox').parent().children('.select_inner').append('<li id="' 
    + optval + '">' + opttext + '</li>');
});

jQuery事件处理代码

$('.selectbox').parent().find('li').on('click', function (){
    var cur = $(this).attr('id');
    $('.selectbox').parent().children('span').text($(this).text());
    $('.selectbox').children().removeAttr('selected');
    $('.selectbox').children('[value="'+cur+'"]')
        .attr('selected','selected');
    alert($('.selectbox').children('[value="'+cur+'"]').text());
    /*console.log($('.selectbox')
        .children('[value="'+cur+'"]').text());*/
});

$('.selectbox').parent().on('click', function (){
    $(this).find('ul').slideToggle('fast');
});

若资源对你有帮助、扫描下方的二维码、关注DD博客微信公众号（ddblogs）吧

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1pJIHgmR 密码: m383

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛