4

我正在使用 Twitter Bootstrap + Chosen。

我正在调用 Chosen 进行选择，但它不起作用（例如，它使用 Twitter Bootstrap 样式），直到您单击页面中的链接，该链接通过 Ajax 抓取另一个页面（订单表单）并通过显示它花式盒子；此页面也使用 Chosen。单击该按钮后，选择将正确应用于选择。

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

4

2 回答 2

7

我长期使用 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 + 选择的 jQuery 插件

希望这可以帮助。谢谢！！

于 2013-02-20T17:04:11.993 回答
0

$('select').Chosen()文件准备好后你打电话了吗？

$(document).ready(function,{

     $('select').Chosen();

});
于 2012-09-22T06:24:28.167 回答