javascript - 带有自定义滚动条的 jQuery 选择框 (roblaplaca) 不起作用

Question

我用过http://www.roblaplaca.com/docs/custom-selectbox/对于自定义选择框脚本，我使用了两个选择框，第二个选择框更新使用 AJAX 第一个选择框的更改事件。以下是示例 HTML。

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

我在 AJAX 成功后使用 sync() 方法更新我的选择框，内容也得到更新但问题是滚动条消失

我检查了 selectbox.js 文件中的 sync() 方法，它在内容更新后调用了 _setupScrollbar(); 方法，但是乳清滚动条没有出现任何帮助？

可以查看Demo code

Answer 1

在您的SelectBox.js中，您需要修改以下代码

(1) 找到此函数_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
}

希望这能解决您的问题。