The Chosen Plugin is not displaying properly

StackOverflow https://stackoverflow.com/questions/23276374

Domanda

I wrote a simple Codeigniter PHP app to implement Chosen. Here's the page:

<!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>

Since I am quite new to this platform, and do not have a high reputation, I cannot post a screen-capture of what it looks like. I will describe it instead:

I get a select control that looks nothing like the nice control I see in the demos, and it does not behave the same way.

May I ask what am I doing wrong?

È stato utile?

Soluzione

you have not included the css file of chosen, chosen works with its js file and its css file.

these files are needed for it:

<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>

On the select tag just needed to add class "chosen-select" you are missing that as well.

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>

Initialization Script:

<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>

See Tutorial Here at my Blog I made few months ago

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top