Question

我正在使用Twitter Bootstrap + Chosen。

我正在选择Chosen进行选择，但它不起作用（如同，它使用Twitter Bootstrap样式），直到您点击页面中通过Ajax＆amp;抓取另一个页面（订单）的链接;通过Fancybox显示它;此页面也使用了选择。单击该选项后，Chosen将正确应用于选择。

页面的头部看起来相同;首先调用jQuery，jQuery的其他插件（用于滑块的UI）工作正常。选择的路径是正确的。删除Bootstrap进行测试没有帮助（它只是在获取订单页面之前显示没有样式。

Answer 1

我正在使用Twitter Bootstrap和Chosen很长一段时间。我从未遇到过这样的问题。您可以在引导CSS或缺少/覆盖样式之前插入所选的CSS。这是完整的工作代码......

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8" />

        <!-- scale the devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- include bootstrap css files -->
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-responsive.css" />

        <title>Twitter Bootstrap + Choosen</title>

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->        

        <!-- includ jquery and bootstrap script -->
        <script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="/bootstrap/js/bootstrap.js"></script>

        <!-- choosen -->
        <link rel="stylesheet" type="text/css" href="/chosen/chosen.css" />
        <script type="text/javascript" src="/chosen/chosen.jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready( function() { 
            // chosen select
            $("form select").chosen({no_results_text: "No results matched"});
        });
        </script>
    </head>

    <body>
        <!-- container -->
        <div class="container">

            <!-- content -->
            <div class="row">
                <div class="span12">
                    <!-- user form -->
                    <form method="post" action="" class="form-horizontal">
                        <div class="control-group">
                            <label for="group_id" class="control-label">User Group : </label>
                            <div class="controls">
                                <select name="group_id" id="group_id" class="input-xlarge">
                                    <option value="">select...</option>
                                    <option value="1">Administrator</option>
                                    <option value="3"selected="selected">Users</option>
                                    <option value="4">Random</option>
                                    <option value="5">Super New</option>
                                    <option value="6">Famous</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!-- // end form -->
                </div>
            </div>
            <!-- // end content -->

        </div>
        <!-- // end container -->
    </body>
</html>

这是图片附件/截图（原样）

Twitter Bootstrap + Chosen jQuery Plugin

希望这会有所帮助。谢谢！

Answer 2

文档准备就绪后，您是否已调用$('select').Chosen()？

$(document).ready(function,{

     $('select').Chosen();

});

Twitter Bootstrap和选择的jQuery插件不起作用

2 个答案: