Javascript 将jScollPane插件应用于wSelect插件不工作

我正在使用jQuery插件设置多个选择字段的样式，但我还想设置滚动条的样式。我使用jQuery插件设计了许多其他滚动条的样式，但是在应用

wSelect

之后，我很难让它在字段上工作

HTML:

然后，我将默认css更改为此，以确保默认滚动条被隐藏：

.wSelect-options {
    overflow-y: hidden;
    overflow-x: hidden;
}

然后，我尝试使用以下方式应用滚动条：

$('.all_cats').jScrollPane();

但它不起作用。我在代码中看到了jScrollPane应用的新html，但没有看到滚动条

然后我试了一下：

$('.wSelect').jScrollPane();

但也不起作用

---

jsIDLE:

当我将其应用于子元素时，它起作用了：

$('.wSelect-options').jScrollPane();

然后我需要更改它用于从子元素中删除类的方法，因为现在它们不是直接子元素

在

wSelect.js

中，我更改了

change: function() {
    this.$options.children().removeClass('wSelect-option-selected wSelect-option-active');

    this.$el.children(':selected').each(function() {
        $(this).data('wSelect-option').select();
    });
},

到

$('.wSelect-options').jScrollPane();

change: function() {
    this.$options.children().removeClass('wSelect-option-selected wSelect-option-active');

    this.$el.children(':selected').each(function() {
        $(this).data('wSelect-option').select();
    });
},

change: function() {
    this.$options.find('div').removeClass('wSelect-option-selected wSelect-option-active');

    this.$el.children(':selected').each(function() {
        $(this).data('wSelect-option').select();
    });
},