Updating this post which was first published 8 April 2015!
Chosen is a JavaScript plugin for Prototype and jQuery that makes long, unwieldy select boxes much more user-friendly.
In this tutorial:
- Demo
- Install
- HTML
- Documentation
Required knowledge:
1. Demo
The original code for version 0.9.11 from 2015 still works! The project is no longer active, however, you can still download and use the last version published, 1.8.7, even though it was published 6 years ago!
2. Install
Download: Releases · harvesthq/chosen (github.com) at time of writing the latest version was 1.8.7. The project is no longer under development.
Unzip
3. HTML
In <head> tags
<link rel="stylesheet" href="chosen/chosen.css" />
Before closing </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
Activate the plugin on the select boxes of your choice:
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>§ stylus :: </title>
<link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>
<select data-placeholder="Choose a Country..." class="chzn-select">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
</body>
</html>
3. Documentation
For more information (including usage, explanation, and FAQs), check out the online documentation here: Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes (harvesthq.github.io) [2]
References:
- Chosen, a Select Box Enhancement Plug-in for jQuery and Prototype (no date) Harvest. Available at: https://www.getharvest.com/blog/2011/07/chosen-plug-in (Accessed: 3 October 2024).
- Chosen (v1.8.7) (no date) Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes. Available at: https://harvesthq.github.io/chosen/ (Accessed: 3 October 2024).