select what?

experimenting with some select replacements

by Kris Herlaar

HTML

<body>
    <dl>
        <dt>a simple textbox</dt>
        <dd>
            <input type="text" id="regular-input" value="default value" />
        </dd>
        
        <dt>Select one or more options:</dt>
        <dd>
            <div class="select" id="multi">
                <div class="placeholder">pick one or more...</div>
                <ul class="options">
                    <li rel="1">1</li>
                    <li rel="2">2</li>
                    <li rel="3">3</li>
                    <li rel="4">4</li>
                    <li rel="foo">Foo</li>
                    <li rel="bar">Bar</li>
                    <li rel="baz">Baz</li>
                    <li rel="dogsandfoxes">The quick brown fox jumps over the lazy dog.</li>
                </ul>
            </div>
        </dd>

        <dt>Select one option:</dt>
        <dd>
            <div class="select" id="single">
                <div class="placeholder">pick one...</div>
                <ul class="options">
                    <li rel="1">1</li>
                    <li rel="2">2</li>
                    <li rel="3">3</li>
                    <li rel="4">4</li>
                    <li rel="foo">Foo</li>
                    <li rel="bar">Bar</li>
                    <li rel="baz">Baz</li>
                    <li rel="dogsandfoxes">The quick brown fox jumps over the lazy dog.</li>

                </ul>
            </div>
        </dd>

        <dt>Select options:</dt>
        <dd>
            <div class="select box" id="box">
                <div class="placeholder">pick one or more...</div>
                <ul class="options">
                    <li rel="1">1</li>
                    <li rel="2">2</li>
                    <li rel="3">3</li>
                    <li rel="4">4</li>
                    <li rel="foo">Foo</li>
                    <li rel="bar">Bar</li>
                    <li rel="baz">Baz</li>
                    <li rel="dogsandfoxes">The quick brown fox jumps over the lazy...

CSS

/* non-specifics */
body {
    margin: 1em;
}

dt {
    width: 190px;
    text-align: right;
    color: darkgray;
    margin: 20px 0 0 0;
}

dd {
    margin: -1.5em 0 .5em 200px;
}

input[type=text] {
    display: block;
    width: auto;
    padding: 5px;
    margin: 0;
}

/* specifics */
.select {
    position: relative;
    min-width: 100px;
    display: inline-block;
    padding: 5px 20px 5px 5px;
    border: outset 1px gray;
    background: rgba(246,246,246,.75);
}
.select:after {
    width: 16px;
    position: absolute;
    right: 0;
    top: 0;
    width: 16px;
    padding: 5px;

    content: '▼';
    outline: 1px gray;
}
.select.box {
    position: relative;
    min-width: 100px;
    display: inline-block;
    padding: 5px 10px 5px 5px;
}
.select.box .options {
    position: relative;
    display: inline-block;
    border: inset 1px;
    width: 100%;
    padding: 2px;
    background: white;
    color: black;
}
.select.box:after{
    content: '';
    display: none;
}

.select .options {
    position: absolute;
    display: none;
    border: outset 1px;
    padding: 2px;
    min-width: 100%;
    background: white;
    color: black;
}
.select .options li {
    list-style-type: none;
    display: block;
    background: white;
    color: black;
    padding: 0 1em 0 .5em;
}
.select .options:visible {
    z-index: 10;
    border: solid 4px red;
}
.select .options li {
    white-space: nowrap;
}
.select .options li.selected {
    background: steelblue;
    color: white;
}
.select .options li.selected:before {
    content: '✓';
}

.select .options li:hover {
    list-style-type: none;
    display: block;
    background: black;
    color: white;
}

JavaScript

window.red = {
    ui: {
        widgets: {
            Dropdown: function(e) {
                var $ = jQuery;
                var element = $(e);
                    element.addClass('red_ui_widgets_Dropdown');
                
                
                if (element.length != 1) {
                    throw new Error('red.ui.widgets.Dropdown manages one element');
                }

                var $placeHolder = element.children('.placeholder');
                var $default = $placeHolder.html();

                
                $('.options li[rel]', element).click(function() {
                    $li = $(this);
                    $li.siblings().removeClass('selected');
                    $li.toggleClass('selected');
                    if ($li.hasClass('selected')) {
                        $placeHolder.html($li.html());
                    } else {
                        $placeHolder.html($default);
                    }
                });

                element.click(function() {
                    $('.options', $('.select').not(element).not('.box').css({
                        zIndex: 1
                    })).fadeOut();
                    $('.options', element).fadeToggle();
    
                    if (('.options', element).is(':visible')) {
                        element.css({
                            zIndex: 1000
                        });
                        $('.options', element).css({
                            zIndex: 1000
                        });
                    } else {
                        element.css({
                            zIndex: 1
                        });
                        $('.options', element).css({
                            zIndex: 1
                        });
                    }
                });
                
                this.val = function(newval) {
                    if (typeof newVal == 'undefined') {
                        var val = [];
                       ...