选择不使用选项卡引导程序答案

【问题标题】：Chosen not working with tab bootstrap选择不使用选项卡引导程序
【发布时间】：2015-05-06 08:41:49
【问题描述】：

对不起，我的英语不好。

我使用选择宽度选项卡引导程序 (http://getbootstrap.com/javascript/#tabs)。但是有问题。

默认选项卡 KFC 处于活动状态，当我单击选项卡 POST 时：

http://i.stack.imgur.com/iL1hi.png

我使用 Chosen v1.1.0 和 bootstrap 3。

我试过了

$('#a[data-toggle="tab"]').on('shown.bs.tab', function () {
  $('.chosen-select', this).chosen();
});

但失败了。

感谢阅读

【问题讨论】：

你能做一个小提琴吗？它不必这样做，它看起来像它的css错误。控制台没有错误？
如果我将 Chosen Jquery 放在选项卡 KFC 中（加载浏览器时选项卡默认），那么它可以工作：你可以在这里看到：uphinhnhanh.com/images/7508792_1.png
也许可以尝试$('select').chosen({width: '100%'}); 作为下面 Jawad 答案的替代方案。更多信息在这里github.com/harvesthq/chosen/issues/92
谢谢@luke_mclachlan 我已经解决了这个问题。

标签： twitter-bootstrap jquery-chosen prototype-chosen

【解决方案1】：

添加 CSS 以应用宽度

<style>
.chosen-container { width: 100% !important; }
</style>

【讨论】：

【解决方案2】：

使用此代码：

    var first = true;
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        if (e.currentTarget.id == "tab2"){
            if (first){
                $('.chosen-select').chosen();
                first = false;
            }
            else
            {
                $('.chosen-select').trigger('chosen:updated');
            }
        }
    });

【讨论】：

【解决方案3】：

正如@luke_mclachlan 建议的那样，尝试相应地设置选择的选择

<script type="text/javascript">

    window.$(document).ready(function () {
        window.$(".chosen-select").chosen();
    });

    window.$('select').chosen({ width: '100%' });

</script>

【讨论】：