https://www.sfbuy.com/new/js/certificate/selectFilter.js?r=10.8

1$.fn.selectFilter = function (options) {
2    var defaults = {
3        callBack: function (res) {
4        }
5    };
6    var ops = $.extend({}, defaults, options);
7    var selectList = $(this).find('select option');
8    var that = this;
9    var html = '';
10    // 读取select 标签的值
11    html += '<ul class="n-filter-list">';
12    $(selectList).each(function (idx, item) {
13        var val = $(item).val();
14        var valText = $(item).html();
15        var selected = $(item).attr('selected');
16        var disabled = $(item).attr('disabled');
17        var isSelected = selected ? 'n-filter-selected' : '';
18        var isDisabled = disabled ? 'n-filter-disabled' : '';
19        if (selected) {
20            html += '<li class="' + isSelected + '" data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
21            $(that).find('.n-filter-title').val(valText);
22        } else if (disabled) {
23            html += '<li class="' + isDisabled + '" data-value="' + val + '"><a>' + valText + '</a></li>';
24        } else {
25            html += '<li data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
26        }
27    });
28    html += '</ul>';
29    $(that).append(html);
30    $(that).find('select').hide();
31    //点击选择
32    $(that).on('click', '.n-filter-text', function () {
33        $(that).find('.n-filter-list').slideToggle(100);
34        $(that).find('.n-filter-list').toggleClass('n-filter-open');
35        $(that).find('.n-icon-arrow').toggleClass('n-filter-show');
36    });
37
38    //点击选择列表
39    $(that).find('.n-filter-list li').not('.n-filter-disabled').on('click', function () {
40        var val = $(this).data('value');
41        var valText = $(this).find('a').html();
42        $(that).find('.n-filter-title').val(valText);
43        $(that).find('.n-icon-arrow').toggleClass('n-filter-show');
44        $(this).addClass('n-filter-selected').siblings().removeClass('n-filter-selected');
45        $(this).parent().slideToggle(50);
46        for (var i = 0; i < selectList.length; i++) {
47            var selectVal = selectList.eq(i).val();
48            if (val == selectVal) {
49                $(that).find('select').val(val);
50            }
51        }
52        ops.callBack(val); //返回值
53    });
54
55    //其他元素被点击则收起
56    $(document).on('mousedown', function (e) {
57        closeSelect(that, e);
58    });
59    $(document).on('touchstart', function (e) {
60        closeSelect(that, e);
61    });
62
63    function closeSelect(th, e) {
64        var filter = $(th).find('.n-filter-list'),
65            filterEl = $(th).find('.n-filter-list')[0];
66        var filterBoxEl = $(th)[0];
67        var target = e.target;
68        if (filterEl !== target && !$.contains(filterEl, target) && !$.contains(filterBoxEl, target)) {
69            filter.slideUp(50);
70            $(th).find('.n-filter-list').removeClass('n-filter-open');
71            $(th).find('.n-icon-arrow').removeClass('n-filter-show');
72        }
73    }
74
75    $("#n-filter-selector option").each(function () {
76        if ($(this).val() == 'audited') {
77            $(this).prop('selected', true);
78        }
79    })
80};
81
82$.fn.updateFilter = function(options) {
83    var defaults = {
84        callBack: function (res) {
85        }
86    };
87    var ops = $.extend({}, defaults, options);
88    var selectList = $(this).find('select option');
89    var that = this;
90    var html = '';
91    // 读取select 标签的值
92    $(selectList).each(function (idx, item) {
93        var val = $(item).val();
94        var valText = $(item).html();
95        var selected = $(item).attr('selected');
96        var disabled = $(item).attr('disabled');
97        var isSelected = selected ? 'n-filter-selected' : '';
98        var isDisabled = disabled ? 'n-filter-disabled' : '';
99        if (selected) {
100            html += '<li class="' + isSelected + '" data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
101            $(that).find('.n-filter-title').val(valText);
102        } else if (disabled) {
103            html += '<li class="' + isDisabled + '" data-value="' + val + '"><a>' + valText + '</a></li>';
104        } else {
105            html += '<li data-value="' + val + '"><a title="' + valText + '">' + valText + '</a></li>';
106        }
107    });
108    $(that).find('.n-filter-list').html(html);
109    //点击选择列表
110    $(that).find('.n-filter-list li').not('.n-filter-disabled').on('click', function () {
111        var val = $(this).data('value');
112        var valText = $(this).find('a').html();
113        $(that).find('.n-filter-title').val(valText);
114        $(that).find('.n-icon-arrow').toggleClass('n-filter-show');
115        $(this).addClass('n-filter-selected').siblings().removeClass('n-filter-selected');
116        $(this).parent().slideToggle(50);
117        for (var i = 0; i < selectList.length; i++) {
118            var selectVal = selectList.eq(i).val();
119            if (val == selectVal) {
120                $(that).find('select').val(val);
121            }
122        }
123        ops.callBack(val); //返回值
124    });
125}