jScrollpaneがブートストラップで動作しないselectpickerのリフレッシュ方法

Question

jScrollpaneのカスタムスクロールバーとブートストラップの選択ピッカーのドロップダウンを統合しようとしました。 When we remove any option element from dropdown and refresh it using selectpicker refresh method/ jScrollpane scrollbar stopped working。

もっと詳しく知りたい場合は、付属のデモリンクをご覧ください。解決策を教えてください。

デモURL：http://dropdown-test.iprojectlab.com/

jsFiddleのURL：https://jsfiddle.net/ztqq0mzs/8/

感謝。

Answer 1

選択した要素を削除した後にプラグインを再度適用しようとすると、jScrollpaneプラグインが壊れている問題が発生しています（理由はわかりません）。

また、あなたのコードでいくつかの間違いを指摘しておきます。

このコード

$(document).delegate(".dropdown-toggle","click",function(){ 
    var jDropdown = $(this).siblings(".dropdown-menu").find("ul.dropdown-menu"); 
    jDropdown.jScrollPane(); 
}); 

1）あなたはすべてのクリックイベントのためのプラグインを結合している、これは悪い方法です。あなたはあなたが一度だけそれを適用することを確認する必要があります。

2）また、delegateを使用してイベントをバインドしています。これは推奨されなくなり、イベントをバインドするためにはonを使用する必要があります。

jQuery 1.7以降、.delegate（）は.on（）メソッドに取って代わりました。ただし、以前のバージョンでは、イベント委任を使用する最も効果的な方法が残りました。イベントバインディングと委任の詳細については.on()メソッドを参照してください。一般に、これらの2つの方法の等価テンプレートです：私はあなたのコードをリファクタリングしている

---

、これは、あなたが何ができるかです。 Working Fiddle

$(document).ready(function() { 

    var jDropdown = $('#country').siblings(".dropdown-menu").find("ul.dropdown-menu"); 
    jDropdown.jScrollPane(); // bind event on document ready, and only once 

    $(document).on("change", ".selectpicker", function() { 
    var selectedIndex = $('#country').prop('selectedIndex'); 
    $(this).siblings(".dropdown-menu").find("ul.dropdown-menu li[data-original-index='" + selectedIndex + "']").remove(); 
    // directly remove the li elements of the plugin, or you can even hide them. 
    }); 
}); 

This bug of yours seemed very interesting (I personally spent some time debugging this).