The Chosen Plugin is not displaying properly

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

Question

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?

Was it helpful?

Solution

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top