将jScollPane插件应用于wSelect插件无法正常工作

我正在使用wSelect jQuery插件来设计多个选择字段，但我也想要设置滚动条的样式。我使用jQuery插件jScrollPane来设计很多其他滚动条，但是在应用wSelect之后无法在该字段上工作。将jScollPane插件应用于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/

来源

2014-04-04 Brett

它工作时，我申请到一个子元素：

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

来源

2014-04-04 11:31:36 Brett

将jScollPane插件应用于wSelect插件无法正常工作

回答

相关问题