jQuery OtherSelect

A jquery addon to handle adding aditional options in a select or multiselect

This example shows the addon working with a basic single option select box

First Second Third

$('#single').otherSelect({
    background : '#B7C3AD',
    widget : false
});

This example shows the addon working with a single select box

also using the jquery-ui multiselect widget

First Second Third

$('#singleWidg').multiselect({
   multiple: false,
   header: "Select an option",
   noneSelectedText: "Select an Option",
   selectedList: 1
}).otherSelect({
    background : '#B7C3AD',
    widget: true
});

This sets up the muliselect first, the otherSelect widget is set up after.

This example shows the addon working with a basic multi-select select box

First Second Third

$('#multi').otherSelect({
    background : '#B7C3AD',
    widget : false
});

This example shows the addon working with a multi-select box

also using the jquery-ui multiselect widget

First Second Third

$('#multiWidg').otherSelect({
    multiselectOptions : {
       multiple: true,
       header: "Select an option",
       noneSelectedText: "Select an Option",
       selectedList: 1
    },
    background : '#B7C3AD',
    widget : true
});

This sets up the otherSelect and the multiselect widget is set up through the widget, passing the multiselect arguments.

Available options

• otherOption : The text of the option to initiate the addition
  

  default : "Add Option"

• background : The background of the input and buttons div
  

  default : ''

• addTitle : the hoverover title of the ad button
  

  default : 'Add Option'

• cancelTitle : the hoverover of the cancel button
  

  default : 'Cancel'

• optionMinLength : option minimum length
  

  default : 1

• optionValidation : the function to validate the newly entered option
  

  default :

  function(value, settings) {
      if (value.length < minLength) {
          alert('Option value must be larger than ' + (minLength - 1) + ' char(s)');
          return false;
      } else {
          return true;
      }

• widget : whether the select is using the multiselect widget
  

  default : false

• multiselectOptions : the options to pass to the multiselect widget
  

  default :

To Do:

• Correct for mobile.