Select Other

A jQuery plugin that gives regular select boxes more versatility


Often times when filling in a form that gives you multiple options for a question, the author will give an "other" option. Sometimes this will trigger another field to pop up for you to type in your answer. Sometimes that field is always there. Often it looks like one of these two examples.

What is your favourite kind of vegetable?


What is your favourite kind of animal?




How can this be made more elegant?


The solution of course, is Select Other!

Select Other is a jQuery plugin that will transform any select element into an input field on command!

After transforming, an exit button is placed within the field allowing it to be changed back to a select field.

Select Other simply changes the element tag. So all styling of the field is kept during the transformation. Positions for the exit button are calculated from its position and dimensions, so it will always be placed on the right side of the field.

Demo

Regular HTML formatting

Select Other works with regular HTML formatting

What is your favourite kind of vegetable?

Bootstrap formatting

Select Other works with Bootstrap's form-control formatting

What is your favourite kind of animal?

Fancy Formatting

In fact, Select Other works with any formatting!

What is your favourite kind of vegetable?

Versatile Positions

Regardless of margin, border, or padding, the exit button is always positioned properly.

What is your favourite kind of vegetable?

Technical Notes

Installation

CDN

By using jsDelivr, select-other is available on demand for any website or web app

Link the following JavaScript and CSS files in your HTML page. Be sure to place the JavaScript file after you've called jQuery.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PetersonRyan/select-other@v1.0/dist/select-other.css">
<script src="https://cdn.jsdelivr.net/gh/PetersonRyan/select-other@v1.0/dist/select-other.min.js"></script>

Manual Install

Download the JavaScript and CSS files from the dist folder on GitHub. Link

jQuery is required to use this plugin. Ensure it is called before select-other.js


How to use

After importing the JavaScript and CSS on the page you would like to use it on, call it using any jQuery identifier. Like this:

$(".your-class").selectOther();

The function, selectOther, takes an optional string as a parameter allowing you to set your trigger word for transforming the field. By default it is set to "Other".

If that word is not already in the options available, it will be added in.