Creating a custom single-selection list

In the previous recipe, we used Chosen. In this recipe, we will take a deeper look into the creation of simple select boxes, making one the most user-friendly way pickers out there.

Getting ready

In this recipe, we will use Chosen (https://github.com/harvesthq/chosen) and its dependency jQuery by adding them from a CDN.

How to do it...

We create an HTML file and the accompanying JavaScript code:

  1. First, we will start with the head section of the HTML, where we will include the Chosen CSS style:
     <head> <meta charset="utf-8"> <title>Single select list</title> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.11/chosen.css"> <style type="text/css"> .drop-down{ width: 250px; ...

Get HTML5 Data and Services Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.