mirrors-jquery-selectBox
/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery selectBox (select replacement plugin)</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.selectBox.js"></script>
    <link type="text/css" rel="stylesheet" href="jquery.selectBox.css"/>

    <style type="text/css">
        #console {
            width: 50%;
            font-family: 'Courier New', monospace;
            border: solid 2px #000;
            background: #000;
            color: #FFF;
            height: 350px;
            overflow: auto;
            padding: 10px;
            float: right;
        }
    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            //
            // Enable selectBox control and bind events
            //

            $('#create').click(function () {
                $('SELECT').selectBox();
            });

            $('#destroy').click(function () {
                $('SELECT').selectBox('destroy');
            });

            $('#enable').click(function () {
                $('SELECT').selectBox('enable');
            });

            $('#disable').click(function () {
                $('SELECT').selectBox('disable');
            });

            $('#serialize').click(function () {
                $('#console').append('<br />-- Serialized data --<br />' +
                        $('FORM').serialize().replace(/&/g, '<br />') + '<br /><br />');
                $('#console')[0].scrollTop = $('#console')[0].scrollHeight;
            });

            $('#refresh').click(function() {
                $('SELECT OPTION').each(function() {
                    $(this).text('Refreshed ' + $(this).val());
                });
                $('SELECT').selectBox('refresh');
            });

            $('#value-1').click(function () {
                $('SELECT').selectBox('value', 1);
            });

            $('#value-2').click(function () {
                $('SELECT').selectBox('value', 2);
            });

            $('#value-2-4').click(function () {
                $('SELECT').selectBox('value', [2, 4]);
            });

            $('#options').click(function () {
                $('SELECT').selectBox('options', {
                    'Opt Group 1': {
                        '1': 'Value 1',
                        '2': 'Value 2',
                        '3': 'Value 3',
                        '4': 'Value 4',
                        '5': 'Value 5'
                    },
                    'Opt Group 2': {
                        '6': 'Value 6',
                        '7': 'Value 7',
                        '8': 'Value 8',
                        '9': 'Value 9',
                        '10': 'Value 10'
                    },
                    'Opt Group 3': {
                        '11': 'Value 11',
                        '12': 'Value 12',
                        '13': 'Value 13',
                        '14': 'Value 14',
                        '15': 'Value 15'
                    }
                });
            });

            $('#default').click(function () {
                $('SELECT').selectBox('settings', {
                    'menuTransition': 'default',
                    'menuSpeed': 0
                });
            });

            $('#fade').click(function () {
                $('SELECT').selectBox('settings', {
                    'menuTransition': 'fade',
                    'menuSpeed': 'fast'
                });
            });

            $('#slide').click(function () {
                $('SELECT').selectBox('settings', {
                    'menuTransition': 'slide',
                    'menuSpeed': 'fast'
                });
            });

            $('select')
                    .selectBox({
                        mobile: true
                    })
                    .focus(function () {
                        $('#console').append('Focus on ' + $(this).attr('name') + '<br />');
                        $('#console')[0].scrollTop = $('#console')[0].scrollHeight;
                    })
                    .blur(function () {
                        $('#console').append('Blur on ' + $(this).attr('name') + '<br />');
                        $('#console')[0].scrollTop = $('#console')[0].scrollHeight;
                    })
                    .change(function () {
                        $('#console').append('Change on ' + $(this).attr('name') + ': ' + $(this).val() + '<br />');
                        $('#console')[0].scrollTop = $('#console')[0].scrollHeight;
                    });

        });

    </script>

</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 14px;">
<form style="background: #FFF; padding: 20px; border: solid 2px #DDD;">
    <div id="console"></div>

    <div style="background: #FFFCCC; border: solid 2px #DDD999; padding: 1px 10px; width: 50%; float: right; clear: right; margin: 1em 0;">
        <p><strong>Note</strong></p>

        <p>
            Refer to <a href="jquery.selectBox.js">jquery.selectBox.js</a>
            for usage, known issues, change log, and more info.
        </p>
    </div>

    <h1>$('select').selectBox();</h1>

    <p>
        <label for="standard-dropdown">Standard Dropdown</label><br/>
        <select id="standard-dropdown" name="standard-dropdown" class="custom-class1 custom-class2" style="width: 200px;">
            <option value="1" class="test-class-1">Item 1</option>
            <option value="2" class="test-class-2" selected="selected">Item 2</option>
            <option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's
                width
            </option>
            <option value="4" class="test-class-4">Item 4</option>
            <option value="5" disabled="disabled">Item 5 (disabled)</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
            <option value="10">Item 10</option>
            <option value="11">Item 11</option>
            <option value="12">Item 12</option>
            <option value="13">Item 13</option>
            <option value="14">Item 14</option>
            <option value="15">Item 15</option>
            <option value="16">Item 16</option>
            <option value="17">Item 17</option>
            <option value="18">Item 18</option>
            <option value="19">Item 19</option>
            <option value="20">Item 20</option>
        </select>
    </p>

    <p>
        Empty Dropdown<br/>
        <select name="empty-dropdown"></select>
    </p>

    <p>
        <label for="multi-select-control">Multi-select Control</label><br/>
        <select id="multi-select-control" name="multi-select-control" multiple="multiple">
            <option value="1" selected="selected">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
            <option value="4">Item 4</option>
            <option value="5" disabled="disabled">Item 5 (disabled)</option>
        </select>
    </p>

    <p>
        Empty Multi-select<br/>
        <select name="empty-multi-select" size="5" multiple="multiple"></select>
    </p>

    <p>
        Multi-select with few options<br/>
        <select name="multi-select-few-options" multiple="multiple" size="5">
            <option value="1" selected="selected">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3</option>
        </select>
    </p>

    <p>
        No multi-select, size = 4<br/>
        <select name="no-multi-with-size-4" size="4">
            <option value="1" selected="selected">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3">Item 3 has &lt;a&gt; really long label but it won't affect the control's display at all
            </option>
            <option value="4">Item 4</option>
            <option value="5" disabled="disabled">Item 5 (disabled)</option>
        </select>
    </p>

    <p>
        Standard control with OPTGROUPS<br/>
        <select name="standard-with-optgroups">
            <optgroup label="Section 1">
                <option value="1">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>
                <option value="4">Item 4</option>
            </optgroup>
            <optgroup label="Section 2">
                <option value="5">Item 5</option>
                <option value="6">Item 6</option>
                <option value="7">Item 7</option>
                <option value="8">Item 8</option>
            </optgroup>
            <optgroup label="Section 3">
                <option value="9">Item 9</option>
                <option value="10">Item 10</option>
                <option value="11">Item 11</option>
                <option value="12">Item 12</option>
            </optgroup>
            <optgroup label="Section 4">
                <option value="13">Item 13</option>
                <option value="14">Item 14</option>
                <option value="15">Item 15</option>
                <option value="16">Item 16</option>
            </optgroup>
            <optgroup label="Section 5">
                <option value="17">Item 17</option>
                <option value="18">Item 18</option>
                <option value="19">Item 19</option>
                <option value="20">Item 20</option>
            </optgroup>
            <optgroup label="Section 6">
                <option value="21">Item 21</option>
                <option value="22">Item 22</option>
                <option value="23">Item 23</option>
                <option value="24">Item 24</option>
            </optgroup>
        </select>
    </p>

    <p>
        Multi-select control with OPTGROUPS<br/>
        <select name="multi-with-optgroups" multiple="multiple">
            <optgroup label="Section 1">
                <option value="1">Item 1</option>
                <option value="2">Item 2</option>
                <option value="3">Item 3</option>
                <option value="4">Item 4</option>
            </optgroup>
            <optgroup label="Section 2">
                <option value="5">Item 5</option>
                <option value="6">Item 6</option>
                <option value="7">Item 7</option>
                <option value="8">Item 8</option>
            </optgroup>
            <optgroup label="Section 3">
                <option value="9">Item 9</option>
                <option value="10">Item 10</option>
                <option value="11">Item 11</option>
                <option value="12">Item 12</option>
            </optgroup>
            <optgroup label="Section 4">
                <option value="13">Item 13</option>
                <option value="14">Item 14</option>
                <option value="15">Item 15</option>
                <option value="16">Item 16</option>
            </optgroup>
            <optgroup label="Section 5">
                <option value="17">Item 17</option>
                <option value="18">Item 18</option>
                <option value="19">Item 19</option>
                <option value="20">Item 20</option>
            </optgroup>
            <optgroup label="Section 6">
                <option value="21">Item 21</option>
                <option value="22">Item 22</option>
                <option value="23">Item 23</option>
                <option value="24">Item 24</option>
            </optgroup>
        </select>
    </p>

    <p>
        <label for="obscured-dropdown">Dropdown positioned above control</label> <br/>
        <select id="obscured-dropdown" name="obscured-dropdown" style="width: 200px">
            <option value="1" class="test-class-1">Item 1</option>
            <option value="2" class="test-class-2" selected="selected">Item 2</option>
            <option value="3" class="test-class-3">Item 3 has a really long label that will not interfere with the control's
                width
            </option>
            <option value="4" class="test-class-4">Item 4</option>
            <option value="5" disabled="disabled">Item 5 (disabled)</option>
            <option value="6">Item 6</option>
            <option value="7">Item 7</option>
            <option value="8">Item 8</option>
            <option value="9">Item 9</option>
            <option value="10">Item 10</option>
            <option value="11">Item 11</option>
            <option value="12">Item 12</option>
            <option value="13">Item 13</option>
            <option value="14">Item 14</option>
            <option value="15">Item 15</option>
            <option value="16">Item 16</option>
            <option value="17">Item 17</option>
            <option value="18">Item 18</option>
            <option value="19">Item 19</option>
            <option value="20">Item 20</option>
        </select>
    </p>

    <hr align="left" style="height: 1px; background-color: #DDD; width: 40%; margin-top: 1.5em; border: 0;"/>

    <p>
        Methods:
        <input type="button" id="destroy" value="Destroy"/>
        <input type="button" id="create" value="Create"/>
        <input type="button" id="enable" value="Enable"/>
        <input type="button" id="disable" value="Disable"/>
        <input type="button" id="serialize" value="Serialize Form"/>
        <input type="button" id="refresh" value="Refresh" />
    </p>

    <p>
        Values:
        <input type="button" id="value-1" value="Value = 1"/>
        <input type="button" id="value-2" value="Value = 2"/>
        <input type="button" id="value-2-4" value="Value = [2, 4]"/>
        <input type="button" id="options" value="Set New Options"/>
    </p>

    <p>
        Transitions:
        <input type="button" id="default" value="Default"/>
        <input type="button" id="fade" value="Fade"/>
        <input type="button" id="slide" value="Slide"/>
    </p>

    <div style="clear: both;"></div>
</form>
</body>
</html>