使用jquery改变select的样式。

相信select大家都不会陌生，它的使用频率无论是服务端开发者还是前端开发人员都非常高，那么html默认自带的select我们大家都知道option是不能自己更改样式的，这篇文章就是告诉你怎么更改select的样式。

其实严格意义上来说不是更改，而是利用jquery脚本语言重新模拟一个出来，使得模拟出来的效果跟select是一样的，而且样式可以随意定制。

废话不多说，先上代码吧。

<select name="select" class="select" id="select">
<option value="1">选项1</option>
<option value="2" selected="selected>选项2</option>
<option value="3">选项3 </option>
</select>

首先我们需要一个这样的html构造代码环境，这肯定是必须的，当然你也可以按照你的方式自己去写！

$.fn.select = function() {
    this.each(function(){
        var self = $(this);
        var warp = $('<div>', {class: 'brief-select-page'});
        var span = $('<span>', {class: 'current'});
        var ul = $('<ul>', {class: 'list'});
        $(this).find('option').each(function(){
        var li = $('<li>', {class: 'option', text: $(this).text(), value: $(this).val()});
        if ($(this).is(':selected')) {
            span.text($(this).text());
            li.addClass('active');
        }
            ul.append(li); 
        });
  
        warp.click(function(e) {
            var open = $(this).hasClass('open');
            if (open == false) {
                ul.show();
                $(this).addClass('open');
            }else{
                ul.hide();
                $(this).removeClass('open');
            }
            $(document).click(function() {
                ul.hide();
                warp.removeClass('open');
            });
            e.stopPropagation();
        });
  
        ul.find('li').click(function(){
            var text = $(this).text();
            ul.find('li').removeClass("active");
            $(this).addClass('active');
            span.text(text);
            self.find('option').removeAttr('selected');
            self.find('option').each(function() {
            if ($(this).text() == text){
                $(this).attr('selected', 'selected');
            }
        })
    });
    warp.append(span);
    warp.append(ul);
    $(this).after(warp);
    $(this).hide();
    });
}

把这段代码放到你的js文件中去，然后在$(document).ready(function() {      - 代码-      })

标注着- 代码- 这个位置，把尖括号的额外信息删除掉，添加以下代码就可以了！

$('.select').select();