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

将jScrollPane插件应用于Select插件不起作用

1 个答案: