選擇的插件顯示不正確

我寫了一個簡單的Codeigniter PHP應用程序來實現Chosen。這裏的頁面：選擇的插件顯示不正確

<!DOCTYPE html> 
<html> 
<head> 
    <script src="<?php echo base_url();?>js/jquery-1.11.0.min.js"></script> 
    <script src="<?php echo base_url();?>js/chosen.jquery.js"></script> 

    <script> 
     jQuery(document).ready(
      function() { 
       jQuery(".chosen").chosen(); 
      } 
     ); 
    </script> 
</head> 
<body> 
    <h2>Chosen Plugin Test</h2> 

    <select class="chosen" style="width: 200px; display: none;"> 
     <option>Choose...</option> 
     <option>jQuery</option> 
     <option selected="selected">MooTools</option> 
     <option>Prototype</option> 
     <option>Dojo Toolkit</option> 
    </select> 
    <select class="chosen" multiple="true" name="faculty"> 
     <option value="AC">A</option> 
     <option value="AD">B</option> 
     <option value="AM">C</option> 
     <option value="AP">D</option> 
    </select> 
</body> 
</html>

因爲我很新的這個平臺，並沒有很高的聲譽，我不能發表什麼它看起來像一個屏幕捕獲。我將描述它：

我得到一個選擇控件，看起來不像我在演示中看到的漂亮的控件，它的行爲也不一樣。

請問我做錯了什麼？

來源

2014-04-24 Gabriel Rymberg

您還沒有包括CSS文件選擇，選擇了與它的JS文件及其CSS文件的工作。

這些文件都需要它：

<link href="/PulseBeta/css/chosen.css" rel="stylesheet" type="text/css"> 
    <link href="/PulseBeta/css/prism.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="/PulseBeta/js/chosen.jquery.js"></script> 
    <script type="text/javascript" src="/PulseBeta/js/prism.js"></script>

在只需要添加類選擇標籤「選擇選」你缺少這一點。

HTML：

<select class="chosen-select" id="SubDepartmentsDDL" name="SubDepartmentsDDL"> 

<option value="1">Hematology (2)</option> 

<option value="2">Clinical Chemistry (0)</option> 

<option value="3">Histopatholgy (0)</option> 

</select>

初始化腳本：

<script type="text/javascript"> 
     var config = { 
      '.chosen-select': {}, 
      '.chosen-select-deselect': { allow_single_deselect: true }, 
      '.chosen-select-no-single': { disable_search_threshold: 10 }, 
      '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, 
      '.chosen-select-width': { width: "95%"}//, 
      //'.chosen-search': {disable_search: false} 
     } 
     for (var selector in config) { 
      $(selector).chosen(config[selector]); 
     } 
    </script>

見Tutorial Here at my Blog I made few months ago

來源

2014-04-24 17:58:49

感謝。這些建議奏效！ –

很高興它幫助 –

選擇的插件顯示不正確

回答

相關問題