爲什麼選擇不顯示正確的用戶界面？

Question

基本上我所選擇的UI看起來像這樣的問題：

有沒有下拉框，選擇的項目出現在文本框的上方，並有每個項目的前隨機點分。

我不會發布我的整個項目，但我使用html Boilerplate，並且我只是將插件提取到'站點根目錄'內的'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文件添加到網頁中。