chosen.jquery.js is a powerful plugin for building user-friendly select boxes.
In this article, we will simply explain how to make the contents of a select box searchable, how to build a multiple selection box, and how to visually render the selected contents.
You can make the select box searchable, allow multiple selections in a Multiple select box, and display the selected items in an easy-to-read format.
We also provide a simple demo page, making this a practical guide for actually using this plugin.
CSS for customizing the select box
In this part, we load chosen.css and introduce basic CSS for general layouts. You can adjust these styles as you like.
<link rel="stylesheet" href="chosen.css">
<style>
body {
font-size: 16px;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.6em;
padding: 20px 0 30px 0;
}
h2{
font-size: 18px;
}
</style>
HTML for customizing the select box
Here we introduce the setup for a standard select box and a Multiple select box for multiple selections.
By adding a searchable feature, you can enhance the usability of the select box.
<h1>Customize and display select boxes conveniently using chosen.jquery.js</h1>
<h2>Customize the standard Select box: Make the selection searchable</h2>
<select data-placeholder="Please select a prefecture" class="chosen-select" tabindex="2">
<option value="">Please select a prefecture</option>
<option value="北海道">Hokkaido</option>
<option value="青森県">Aomori</option>
<option value="岩手県">Iwate</option>
<option value="宮城県">Miyagi</option>
<option value="秋田県">Akita</option>
<option value="山形県">Yamagata</option>
<option value="福島県">Fukushima</option>
<option value="茨城県">Ibaraki</option>
<option value="栃木県">Tochigi</option>
<option value="群馬県">Gunma</option>
<option value="埼玉県">Saitama</option>
<option value="千葉県">Chiba</option>
<option value="東京都">Tokyo</option>
<option value="神奈川県">Kanagawa</option>
<option value="新潟県">Niigata</option>
<option value="富山県">Toyama</option>
<option value="石川県">Ishikawa</option>
<option value="福井県">Fukui</option>
<option value="山梨県">Yamanashi</option>
<option value="長野県">Nagano</option>
<option value="岐阜県">Gifu</option>
<option value="静岡県">Shizuoka</option>
<option value="愛知県">Aichi</option>
<option value="三重県">Mie</option>
<option value="滋賀県">Shiga</option>
<option value="京都府">Kyoto</option>
<option value="大阪府">Osaka</option>
<option value="兵庫県">Hyogo</option>
<option value="奈良県">Nara</option>
<option value="和歌山県">Wakayama</option>
<option value="鳥取県">Tottori</option>
<option value="島根県">Shimane</option>
<option value="岡山県">Okayama</option>
<option value="広島県">Hiroshima</option>
<option value="山口県">Yamaguchi</option>
<option value="徳島県">Tokushima</option>
<option value="香川県">Kagawa</option>
<option value="愛媛県">Ehime</option>
<option value="高知県">Kochi</option>
<option value="福岡県">Fukuoka</option>
<option value="佐賀県">Saga</option>
<option value="長崎県">Nagasaki</option>
<option value="熊本県">Kumamoto</option>
<option value="大分県">Oita</option>
<option value="宮崎県">Miyazaki</option>
<option value="鹿児島県">Kagoshima</option>
<option value="沖縄県">Okinawa</option>
</select>
<br>
<br>
<h2>Customize the Multiple Select box: Search selections + display selected items clearly</h2>
<select data-placeholder="Please select a prefecture" class="chosen-select" multiple tabindex="4">
<option value="">Please select a prefecture</option>
<option value="北海道">Hokkaido</option>
<option value="青森県">Aomori</option>
<option value="岩手県">Iwate</option>
<option value="宮城県">Miyagi</option>
<option value="秋田県">Akita</option>
<option value="山形県">Yamagata</option>
<option value="福島県">Fukushima</option>
<option value="茨城県">Ibaraki</option>
<option value="栃木県">Tochigi</option>
<option value="群馬県">Gunma</option>
<option value="埼玉県">Saitama</option>
<option value="千葉県">Chiba</option>
<option value="東京都">Tokyo</option>
<option value="神奈川県">Kanagawa</option>
<option value="新潟県">Niigata</option>
<option value="富山県">Toyama</option>
<option value="石川県">Ishikawa</option>
<option value="福井県">Fukui</option>
<option value="山梨県">Yamanashi</option>
<option value="長野県">Nagano</option>
<option value="岐阜県">Gifu</option>
<option value="静岡県">Shizuoka</option>
<option value="愛知県">Aichi</option>
<option value="三重県">Mie</option>
<option value="滋賀県">Shiga</option>
<option value="京都府">Kyoto</option>
<option value="大阪府">Osaka</option>
<option value="兵庫県">Hyogo</option>
<option value="奈良県">Nara</option>
<option value="和歌山県">Wakayama</option>
<option value="鳥取県">Tottori</option>
<option value="島根県">Shimane</option>
<option value="岡山県">Okayama</option>
<option value="広島県">Hiroshima</option>
<option value="山口県">Yamaguchi</option>
<option value="徳島県">Tokushima</option>
<option value="香川県">Kagawa</option>
<option value="愛媛県">Ehime</option>
<option value="高知県">Kochi</option>
<option value="福岡県">Fukuoka</option>
<option value="佐賀県">Saga</option>
<option value="長崎県">Nagasaki</option>
<option value="熊本県">Kumamoto</option>
<option value="大分県">Oita</option>
<option value="宮崎県">Miyazaki</option>
<option value="鹿児島県">Kagoshima</option>
<option value="沖縄県">Okinawa</option>
</select>
JavaScript implementation using chosen.jquery.js
Here we explain how to effectively implement chosen.jquery.js using jQuery.
Load jquery-3.2.1.min.js and chosen.jquery.js files.
This section introduces how to configure multiple selections and width settings with the chosen plugin.
Write $(‘select box element’).chosen({options}). In the options, you can set the select box width, maximum selectable number, and more.
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('.chosen-select').chosen({width: '50%'});
</script>
Demo page: Customize and display select boxes conveniently using chosen.jquery.js
If you want to check the actual behavior, please visit the demo page from the link below.
Demo page: Customize and display select boxes conveniently using chosen.jquery.js
Source: Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes
Conclusion
By using chosen.jquery.js, you can enhance the usability of select boxes and improve user experience.
The method of implementation and customization is highly flexible, so adjust the settings according to your needs.
※If you reuse this code, please do so at your own risk.
Please do not reuse the Google Analytics tag in the head of the demo page.
