javascript - 将 jScollPane 插件应用于 wSelect 插件不起作用

Question

我正在使用wSelect jQuery 插件用于设置多选字段的样式，但我也想设置滚动条的样式。我使用 jQuery 插件 jScrollPane为许多其他滚动条设置样式，但在应用 wSelect 后，我无法使其在该字段上工作。

HTML:

<div class="selections all_cats">
    <select name="all_cats" id="all_cats" multiple="multiple">
        <option>Some stupid cat #1</option>
        <option>Some stupid cat #2</option>
        <option>Some stupid cat #3</option>
        <option>Some stupid cat #4</option>
        <option>Some stupid cat #5</option>
        <option>Some stupid cat #6</option>
        <option>Some stupid cat #7</option>
        <option>Some stupid cat #8</option>
        <option>Some stupid cat #9</option>
        <option>Some stupid cattttttttttttttttttttttttttttttttttttttttttttttttttt #1</option>
        <option>Some stupid cat #2</option>
        <option>Some stupid cat #3</option>
        <option>Some stupid cat #4</option>
        <option>Some stupid cat #5</option>
        <option>Some stupid cat #6</option>
        <option>Some stupid cat #7</option>
        <option>Some stupid cat #8</option>
        <option>Some stupid cat #9</option>
        <option>Some stupid cat #1</option>
        <option>Some stupid cat #2</option>
        <option>Some stupid cat #3</option>
        <option>Some stupid cat #4</option>
        <option>Some stupid cat #5</option>
        <option>Some stupid cat #6</option>
        <option>Some stupid cat #7</option>
        <option>Some stupid cat #8</option>
        <option>Some stupid cat #9</option>                                            
    </select>
</div>

我用这个应用样式:

$('#all_cats').wSelect();

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

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

然后我尝试应用滚动条:

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

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

然后我尝试了这个:

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

但也不起作用。

jsFiddle:http://jsfiddle.net/Jp9M9/

Answer 1

当我将它应用到子元素时它起作用了:

$('.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();
    });
},

到...

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

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