Apply the jScollPane plugin to the wSelect plugin not working

Question

I am using the wSelect jQuery plugin to style a multiple select field but I also want to style the scroll bars. I use the jQuery plugin jScrollPane to style many other scrollbars but am having trouble getting it to work on the field after wSelect has been applied.

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>

I apply the styling with this:

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

I then change the default css to this to make sure the default scrollbars are hidden:

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

Then I try to apply the scrollbars with:

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

But it doesn't work. I see the new html applied by jScrollPane in the code, but I don't see the scrollbars.

I then tried this:

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

But doesn't work either.

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

Answer 1

It worked when I applied it to a child element:

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

Then I needed to change the method it uses to remove the class from the child elements since now they are not direct children..

In wSelect.js I changed..

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

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

to...

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

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