O'Reilly logo

HTML5 Data and Services Cookbook by Mite Mitreski, Gorgi Kosev

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required