jQuery实现select选择框样式美化插件

本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