php - The Chosen Plugin is not displaying properly -
i wrote simple codeigniter php app implement chosen. here's 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 quite new platform, , not have high reputation, cannot post screen-capture of looks like. describe instead:
i select control looks nothing nice control see in demos, , not behave same way.
may ask doing wrong?
you have not included css file of chosen, chosen works js file , css file.
these files needed 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 select tag needed add class "chosen-select" missing 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} } (var selector in config) { $(selector).chosen(config[selector]); } </script> 
Comments
Post a Comment