Better Select Control

Better Select Control

A small plugin for Frappe that adds the support of options group to the select control.

Install Now
128 installs
Pricing

Free

  • All features
Buy

$5 /mo

  • All features
  • Support future improvements
Buy

A small plugin for Frappe that adds the support of option groups to the select control.


Usage

  1. Go to Customization > Customize Form
  2. Enter the form type/name (ex: 'User')
  3. Scroll down to the form fields area and edit the select fields you want
  4. In the options property of the fields, add a hashtag # before the option text to make it a group label
  5. To close a group just add a single hashtag # in a new line
  6. Add an exclamation mark ! before a hashtag # at the beginning of the option text to stop it from being used as a group label

⚠️ Important ⚠️

You can't modify the original fields of a doctype, so create a new field or clone and modify the entire doctype.


Examples

Single Option Group

  • Options:
One
Two
#Three
Four
Five
  • Result HTML:
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="Three">
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>

Multiple Option Groups

  • Options:
#One
Two
Three
#Four
Five
Six
  • Result HTML:
<optgroup label="One">
    <option value="Two">Two</option>
    <option value="Three">Three</option>
</optgroup>
<optgroup label="Four">
    <option value="Five">Five</option>
    <option value="Six">Six</option>
</optgroup>

Normal Options After Option Group

  • Options:
One
Two
#Three
Four
Five
#
Six
  • Result HTML:
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="Three">
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>
<option value="Six">Six</option>

Empty Option Group Label

  • Options:
One
Two
#
Three
Four
Five
#
Six
  • Result HTML:
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="">
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>
<option value="Six">Six</option>

Placeholder Option

  • Options:
$Select..
One
Two
#Three
Four
Five
#
Six
  • Result HTML:
<option disabled hidden="" selected value="">Select...</option>
<option value="One">One</option>
<option value="Two">Two</option>
<optgroup label="Three">
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</optgroup>
<option value="Six">Six</option>

User Reviews

Write a review

No reviews yet, be the first to review.