Bootstrap-Select 没有变化

Question

我使用 http://silviomoreto.github.io/bootstrap-select/examples/ 作为我的自定义 select 盒子。内容已加载JQuery。如果我更改 select 框，则按钮及其内容不会更新。我试过了 $('select').selectpicker(); 来解决这个问题，但它不起作用。你有解决办法吗？

$('select#item').on("change", function ()
    {
        var intID = parseInt($('select#item').val());

        if (intID > 0)
        {
            $.post(_this.strAjaxUrl, {
                'action': 'getAction',
                'intID': intID
            }, function (strResponse)
            {
                var jsonDaten = $.parseJSON(strResponse);
                if (jsonDaten.strStatus == "OK")
                {
                    $('select#item2').html(jsonDaten.strHtml);
                    $('select#item2').selectpicker();
                }
            });
        }
    });

Answer 1

您正在将更改事件绑定到 select 标记。实际上，将插件应用到 select 标签后会发生什么，select 标签将被隐藏并替换为带有 ul 和 li 标签的 'div' 元素.在这之后你的 select 标签不再在 UI 上，它被隐藏了。所以你的 change 事件永远不会发生（因为你不再玩 select 标签了）。如果您查看插件文档，您会发现有一个名为 changed.bs.select 的 event。 Take a look here.

所以你实际上必须使用插件提供的事件来触发更改事件。所以使用像

这样的东西

$('select#item').on('changed.bs.select', function (e) {
  // get new data to the select Tag.
});

这里棘手的部分是，您可以更新 select 标签，但请记住此 select 标签是隐藏的。所以你可能看不到 UI.

上的变化

所以解决方案是销毁插件，当你想用新数据更新select标签时，使用$('select#item').selectpicker('destroy');应用新的html.然后重新应用插件。另请记住，您还必须重新应用 $('select#item').on('changed.bs.select', function (e) { 事件绑定。

如果有帮助请告诉我。

Bootstrap-Select 没有变化

Bootstrap-Select isn´t changing

jquery

html

bootstrap-select