带有自定义滚动条的jQuery选择框（roblaplaca）不起作用答案

【问题标题】：jQuery Select box (roblaplaca) with custom scroll bar not working带有自定义滚动条的jQuery选择框（roblaplaca）不起作用
【发布时间】：2013-09-23 05:29:03
【问题描述】：

我已将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

【问题讨论】：

请创建一个小提琴
我尝试过使用 jsFiddle 但脚本无法正常工作，所以我已将此示例代码放在我的服务器上...请您帮我从演示代码中创建小提琴。
当然。给我看看你的代码
您可以从demo1.zylone.com/jQuery-Custom-Selectbox-master查看
我认为是插件的问题

标签： javascript jquery html css ajax

【解决方案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();
};

滚动条不起作用，因为您的 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
}

希望这能解决你的问题。

【讨论】：

感谢您的帮助，它成功了... :) 我更新了我的演示代码 demo1.zylone.com/jQuery-Custom-Selectbox-master

【解决方案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();
};

【讨论】：