silviomoreto/bootstrap-select — pull request #48 by BaylorRae (2013-02-06 18:08:57+00:00)
Title: Refactor `createLi`; add two new features with tests

To start off, I really like your plugin. After looking through 2 or 3 different select dropdown plugins yours is by far my favorite.

----

I wanted to create a dropdown similar to YouTube's "Date Range" dropdown. It does two things that greatly improve the way the options are listed.

1. It adds separators to group the items
2. Options can have custom text added that isn't relevant to the option's text itself.

![Analytics - YouTube](https://f.cloud.github.com/assets/241816/132462/77822bce-7085-11e2-9832-9b349c179340.jpg)

I don't know if it's something you want or not, but I added the [Jasmine testing framework][jasmine_js] to hopefully prevent breaking existing functionality. If you don't like Jasmine, or using the [jasmine-gem][jasmine_gem] to run server, you can just grab the changes I made in `bootstrap-select.js`

> Note: I didn't add a compressed version because I wasn't sure which compressor you liked.

---

### How to use my changes

You can change the option's text by adding a `data-option-text` attribute. This option only applies to the dropdown menu itself. It doesn't modify the the text added to the button.

```html

This week

```

To add a separator you need to set `data-separator` to `true`. The value and text within then `
` tag is omitted.

```html

---

```

To style the separator I just added this to my code.

```css
.dropdown-menu ul .separator {
background: #ddd;
height: 1px;
display: block;
margin: 5px 0;
}
```

[jasmine_js]: https://github.com/pivotal/jasmine
[jasmine_gem]: https://github.com/pivotal/jasmine-gem