No commit activity in last 3 years
No release in over 3 years
Select tag using radio buttons, with provision for typing in custom "Other" value. Requires jQuery and Bootstrap 3.x
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 1.6
>= 0
 Project Readme

Select with "Other"

Select tag using radio buttons, with provision for typing in custom "Other" value.

Example

select with other option example

Requirements

  • jQuery
  • Bootstrap 3.x
  • Optional: The example also uses FontAwesome for the down caret icon.

Installation

HTML Markup

Any project

In the HEAD of your HTML document add the following

<script src="src/select-with-other.min.js"></script>

Rails project

If you are installing the gem version of this plugin you need to add this to your application.js file:

//= require select-with-other

HTML

Within a FORM use following frame and then modify / style to your liking. It might not break.

Change phone_label name attribute's value to the desired name in your form field.

<div class="btn-group">
  <button aria-expanded="false" class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    <span>[ Pick One ]</span>
    <span class="fa fa-caret-down fa-fw"></span>
  </button>

  <ul class="well well-sm dropdown-menu" role="menu">
    <div class="list-group">
      <div class="list-group-item">
        <label class="radio-inline">
          <input name="phone_label" type="radio" value="Cell">
          Cell
        </label>
      </div>

      <div class="list-group-item">
        <label class="radio-inline">
          <input name="phone_label" type="radio" value="Home">
          Home
        </label>
      </div>

      <div class="list-group-item">
        <label class="radio-inline">
          <input name="phone_label" type="radio" value="Office">
          Office
        </label>
      </div>
    </div>

    <div class="other-option">
      <div class="input-group">
        <div class="input-group-addon">
          <input checked="checked" name="phone_label" type="radio">
        </div>

        <input class="form-control" placeholder="Other" type="text">
      </div>
    </div>
  </ul>
</div>

Javascript

$(function () { $('.btn-group').selectwithother(); })

Coffeescript variation

$(-> $('.btn-group').selectwithother())

Help

Create an issue if you need any assistance. Create pull requests to contribute. Please do.

License

MIT