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.
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.
Select Other works with regular HTML formatting
Select Other works with Bootstrap's form-control formatting
In fact, Select Other works with any formatting!
Regardless of margin, border, or padding, the exit button is always positioned properly.
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">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
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.