thebox193 / jquery.otherdropdown

A dropdown select box where choosing 'other' prompts the user for an alternate response.

jquery.otherdropdown

A dropdown select box where choosing 'other' prompts the user for an alternate response.

• Examples / Docs
• Github
• NPM Stats

Install

NPM

• Follow the instructions to install Node which gives you npm.
• Switch to project folder and run yarn add jquery.otherdropdown or npm install jquery.otherdropdown --save
• Include jquery.otherdropdown.js after jQuery is loaded in your document.

Bower

• Follow the instructions to install Bower.
• Switch to project folder and run bower install jquery.otherdropdown --save
• Include jquery.otherdropdown.js after jQuery is loaded in your document.

Add to project

• import 'jquery.otherdropdown'; or
• <script type="text/javascript" src="./path/to/jquery.otherdropdown.min.js"></script> after the jQuery script tag

Usage

• Bind jquery.otherdropdown to an html select, optionally pass an options object
• $('select').otherdropdown()
• $('.mySelect').otherdropdown({placeholder:'Type your answer'})

Options

You can pass in options to otherdropdown as an object.

• {value: 'more'} - Optional, Value you wish to trigger the text input. default = 'other'
• {classes: 'noborder greybg'} - Optional, clases that the text input should have. default = null
• {placeholder: 'Type your answer'} - Optional, placeholder text on text input. default = name

Future

• Add Callbacks hooks
• Add tests

Support on Beerpay

Hey there! Help support me with a couple of 🍻!

jquery.otherdropdown's Issues

Selecting 'other' option a second time after entering no text doesn't bring up the input a second time.

This is a limitation of browser event firing. Because the input value didn't change, no change event is fired. Aka selecting 'other' then selecting 'other' again won't fire a change event. Since there appears to be no event there is no clear way to listen to this sort of behavior without having to write a workaround.

Stackoverflow has talked about this and it's workaround.

For now there is no plan to add any sort of workaround unless there is a moderate demand for it.

Callback for restricting types of data types.

IE: Numbers only, length, special char.

When selecting the 'other' option twice in a row, the previous answer is pre-filled.

Text input ought to be cleared / reset.

HTML Escaping input text

There is a bug when a user types a string with characters like " and possibly others. The input value typed doesn't get selected or doesn't display correctly. It is possible there is a XXS vulnerability since we are trusting text input values currently as well.

Added fields lost on input.

Not sure if this is a bug, but pressing enter reloads the page; removing added fields.

Check for duplicates.

Should a user type the same text twice, or type something that already is an option, it ought to be selected instead of creating a new/duplicate entry.

Create min builds.

It would be nice to have a min build.

Improve text field capatilazation

Remove embedded jQuery dependency

Update demo page to demonstrate css option better.