Add Options To Select Box Dynamically - jQuery otherDropdown

otherDropdown is a jQuery plugin that allows the user to dynamically add more options to the existing select dropdown list.

It allows you to add an 'Other' option to your select box, which when pressed displays an input field where your users can add a new option.

This could be useful in many different scenarios when you want to give your users an option to create their own list. 

How to use it:

1. Download and load the jquery.otherdropdown.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.otherdropdown.js"></script>

2. Add an 'Other' option to your select box.

<select name="example" id="example">
  <option value="">Select One</option>
  <option value="html">HTML</option>
  <option value="javaScript">JavaScript</option>
  <option value="css">css</option>
  <!-- Required -->
  <option value="Other">Other</option>
</select>

3. Initialize the plugin on the select box and done.

$(function(){
  $('#example').otherDropdown();
});

4. Add a placeholder to the text field.

$(function(){
  $('#example').otherDropdown({
    placeholder: "New Option Here",
  });
});

5. Override the default value which used to trigger the input field.

$(function(){
  $('#example').otherDropdown({
    value: "New",
  });
});

<select name="example" id="example">
  <option value="">Select One</option>
  <option value="html">HTML</option>
  <option value="javaScript">JavaScript</option>
  <option value="css">css</option>
  <!-- Required -->
  <option value="New">New Option</option>
</select>

6. Apply CSS classes to the input field.

$(function(){
  $('#example').otherDropdown({
    classes: "myClass-1 myClass-2"
  });
});

---

This awesome jQuery plugin is developed by TheBox193. For more Advanced Usages, please check the demo page or visit the official website.