Javascript
Picklist for convenient user interaction code
Description and API
PICKLIST is a small Javascript class that encapsulates a mapping between strings and constants.
Typically used for drop-down lists, checkboxes and radio button controls. Simple and flexible
to use: One or two array constructor, generate HTML method, look-up string from index or index
from string methods.
Example
Setup
var DIR_N = 0;
var DIR_E = 90;
var DIR_S = 180;
var DIR_W = 270;
var directionsList = new PICKLIST(['North','East','South','West'],[DIR_N,DIR_E,DIR_S,DIR_W]);
Display
var htmlToShow = directionsList.ChecksHtml([['West',90'],'directions','<br>');
Show API Hide API
Constructor
var p = new PICKLIST(Array of strings); // simply indexed
var p = new PICKLIST(Array of strings,Array of integers); // map strings to 'constants'
Create HTML
var options = p.OptionsHtml(Selected item(s));
Selected items may be missing, a string or index or an array of strings/indexes.
Note this only returns the <option> tags not the surrounding <select>
var html = p.RadioHtml(Selected item(s),Name,Markup);
var html = p.ChecksHtml(Selected item(s),Name,Markup);
Selected items as above. Name is name of control. Markup is optional HTML to put between items.
Lookup
var str = p.GetItemString(Index);
var int = p.GetItemIndex(String);
If the string/index is not found etc. then an error is raised so this should go in a try/catch.
Demonstrate and exercise
Show demo Hide demo
Get started
|
|
- Notes
- testpicklist.js is included in the download package as an example of usage.
It won't work straight out of the box as it needs jQuery and styling.
|
Testing
Run tests
Red results indicate failed tests.
Error messages are often the correct response.
Constructor
Lookups