Question

我写了一个简单的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>

由于我对这个平台很陌生，并且没有很高的声誉，我无法发布它看起来像什么的屏幕截图。我将改为描述它：

我得到一个选择控件，看起来不像我在演示中看到的好控件，并且它的行为方式不同。

请问我做错了什么？

Answer 1

您尚未包含已选择的 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>

在选择标签上只需添加课程＆＃34;选择 - 选择＆＃34; ，您也错过了。

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

Chosen插件无法正常显示

1 个答案: