1

カスタム セレクト ボックス スクリプトにhttp://www.roblaplaca.com/docs/custom-selectbox/を使用し、2 つのセレクト ボックスを使用しました。2 番目のセレクト ボックスは、最初のセレクト ボックスの変更イベントでAJAX を使用して更新します。以下はサンプル HTML です。

<option>One</option>
<option>Two</option>
<option>Three</option>

AJAX の成功後に選択ボックスを更新するために sync() メソッドを使用しました。コンテンツも更新されますが、問題はスクロール バーが消えることです。

_setupScrollbar();を呼び出すselectbox.jsファイルの sync() メソッドを確認しました。コンテンツ更新後のメソッドですが、ホエイ スクロール バーが表示されません。

デモコードを確認できます

4

2 に答える 2

0

スクロールバーを持たない選択ボックスのために、次の @rajnikanth コードを変更しました

this.sync = function() {
    $options = cfg.selectbox.find("option");
    //$dl.html(_renderOptions());
    $jpane = $customSelect.find("div.jspPane");

    if($jpane.length == 1) // need to check if selectbox having scroll bar?
    {
       $jpane.html(_renderOptions()); //HTML injected to selectbox having scrollbar
    }
    else
    {
       $dl.html(_renderOptions()); //else HTML injected to selectbox not having scrollbar
    }

    _bindHover();
    _setupScrollbar();
};
于 2013-09-23T10:02:05.390 に答える
0

SelectBox.jsで、次のコードを変更する必要があります

(1) これを見つけてfunction _setupScrollbar()、このコードを追加しますautoReinitialise: true。コードは次のように表示されます。

self.scrollpane = $dl.jScrollPane($.extend({
    contentWidth: 200,
    autoReinitialise: true
}, cfg.scrollOptions));

(2) この関数を見つけて、次this.sync = function()のようにコードを変更します。

this.sync = function() {
    $options = cfg.selectbox.find("option");
    //$dl.html(_renderOptions());
    $jpane = $customSelect.find("div.jspPane");

    if($jpane.length == 1) // need to check if selectbox having scroll bar?
    {
       $jpane.html(_renderOptions()); //HTML injected to selectbox having scrollbar
    }
    else
    {
       $dl.html(_renderOptions()); //else HTML injected to selectbox not having scrollbar
    }

    _bindHover();
    _setupScrollbar();
};

jsPane が新しいコンテンツに置き換えられるため、スクロールバーが機能しないため、sync(); の次のコードを変更しました。

// $dl.html(_renderOptions());
$jpane = $customSelect.find("div.jspPane");
if($jpane.length == 1) // need to check if selectbox having scroll bar?
{
   $jpane.html(_renderOptions()); //HTML injected to selectbox having scrollbar
}
else
{
   $dl.html(_renderOptions()); //else HTML injected to selectbox not having scrollbar
}

これで問題が解決することを願っています。

于 2013-09-23T08:41:14.213 に答える