simplicityFancySelect

Unrolling the options.

To enhance a <select> by applying a HTML template to it, first create the select and a target div.

<div id="example">
    <select name="example">
        <option value="">Any...</option>
        <option value="1" data-count="3">First</option>
        <option value="2" data-count="11">Second</option>
        <option value="3" data-count="6">Third</option>
    </select>
    <div></div>
</div>

Then apply the simplicityFancySelect widget to it.

$('#example div').simplicityFancySelect({
    select: '#example select'
});

Example

Change the selection in 1 and the visible state in 2 is updated.

Click on rows in 2 and the value in 1 is updated.

The HTML template can be customized in two different ways. You can either set the template option to a valid HTML content string or set it to '' and place the template in the DOM.

Let's configure the widget to use a trimmed down version of the HTML (excluding the facet count data attribute).

First by using the template widget option.

HTML

<div id="example">
    <select name="example">
        <option value="">Any...</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select>
    <div></div>
</div>

JavaScript

$('#example div').simplicityFancySelect({
    select: '#example select',
    template: '<ul class="ui-simplicity-fancy-select-options"><li class="ui-simplicity-fancy-select-option"><a href="#" class="ui-simplicity-fancy-select-label"/></li></ul>'
});

Example

Second, by using the DOM target to specify the template.

HTML

<div id="example">
    <select name="example">
        <option value="">Any...</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select>
    <div>
        <ul class="ui-simplicity-fancy-select-options">
            <li class="ui-simplicity-fancy-select-option"><a href="#" class="ui-simplicity-fancy-select-label"></a></li>
        </ul>
    </div>
</div>

JavaScript. Note that we override the template option to be '' so that the widget falls back to the DOM element's contents.

$('#example div').simplicityFancySelect({
    select: '#example select',
    template: ''
});

Example

If the select is configured to support multiple selection, then you can select multiple rows in the fancy version.

HTML

<div id="example">
    <select name="example" multiple="multiple">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="5">Fifth</option>
    </select>
    <div>
        <ul class="ui-simplicity-fancy-select-options">
            <li class="ui-simplicity-fancy-select-option"><a href="#" class="ui-simplicity-fancy-select-label"></a></li>
        </ul>
    </div>
</div>

JavaScript

$('#example div').simplicityFancySelect({
    select: '#example select',
    template: ''
});

Example

Change the selection in 1 and the visible state in 2 is updated.

Click on rows in 2 and the value in 1 is updated.

You can enable support for checkboxes by adding the ui-simplicity-fancy-select-checkbox class to them.

HTML

<div id="example">
    <select name="example" multiple="multiple">
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="5">Fifth</option>
    </select>
    <div>
        <ul class="ui-simplicity-fancy-select-options">
            <li class="ui-simplicity-fancy-select-option">
                <label>
                    <input type="checkbox" name="example" class="ui-simplicity-fancy-select-checkbox" />
                    <span class="ui-simplicity-fancy-select-label"></span>
                </label>
            </li>
        </ul>
    </div>
</div>

JavaScript

$('#example div').simplicityFancySelect({
    select: '#example select',
    template: ''
});

Example

Radio buttons can also be used by using the radioStyle option and ui-simplicity-fancy-select-radio css class.

HTML

<div id="example">
    <select name="example">
        <option value="">Any...</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
        <option value="5">Fifth</option>
    </select>
    <div>
        <ul class="ui-simplicity-fancy-select-options">
            <li class="ui-simplicity-fancy-select-option">
                <label>
                    <input type="radio" name="example" class="ui-simplicity-fancy-select-radio" />
                    <span class="ui-simplicity-fancy-select-label"></span>
                </label>
            </li>
        </ul>
    </div>
</div>

JavaScript

$('#example div').simplicityFancySelect({
    select: '#example select',
    template: '',
    radioStyle: true
});

Example