Question

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

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

我已经使用sync（）方法在AJAX成功后更新我的选择框，内容也会更新但问题是滚动条消失

我已检查 selectbox.js 文件中的sync（）方法，它在内容更新后调用 _setupScrollbar（）; 方法，但乳清滚动条没有显示任何帮助？

您可以查看Demo code

Answer 1

在 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();
};

Scrollbar因为你的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
}

我希望这能解决你的问题。

Answer 2

我已经修改了以下没有滚动条的选择框的@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();
};

jQuery选择框（roblaplaca），自定义滚动条不起作用

2 个答案: