为什么选择没有显示正确的用户界面？

Question

基本上我有选择的UI看起来像这样的问题：

没有下拉框，所选项目出现在文本框上方，每个项目前面都有随机点点。

我不会发布我的整个项目，但我正在使用html Boilerplate，我只是将插件解压缩到'Site Root'内的'Chosen'文件夹中。然后，我在底部添加了另一个链接：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="chosen/chosen.jquery.js"></script> <!--I added this-->

然后，在我的main.js文件的底部，我添加了这个：

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

最后，这是您目前看到的对话框的HTML：

 <div class="messagepop pop">
        <form method="post" id="new_message" action="/messages">
            <p>
                <select id="subject_select" class="chzn-select" >
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </p>
            <p>
                <input type="button" value="OK" name="commit" id="message_submit"/>
                <input type="button" value="Cancel" name="commit" id="message_cancel"/>
            </p>
        </form>
    </div>

知道为什么会这样吗？感谢。

Answer 1

您只添加了所选的js文件。您必须将与插件关联的chosen.css文件添加到网页中。