<html>
    <head>
        <link rel="stylesheet" type="text/css" href="chosen.css" media="screen,projection"/>
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="selectMultiple.js"></script>
    </head>
    <body>
        <select name="defaultForComparison" style="width:150px;" multiple="multiple">
            <option value="0">----</option>
            <option value="t1">First item</option>
            <option value="t2" selected>Second item</option>
            <option value="t3" disabled>Third item</option>
            <option value="t4">Fourth item</option>
        </select>
        <select name="defaultForComparison" style="width:150px;">
            <option value="0">----</option>
            <option value="t1">First item</option>
            <option value="t2" selected>Second item</option>
            <option value="t3" disabled>Third item</option>
            <option value="t4">Fourth item</option>
        </select>
        <select name="demo" id="selectDemo" style="width:150px;">
            <option value="0">----</option>
            <option value="t1" data-display="1st">First item</option>
            <option value="t2" data-display="2nd" selected>Second item</option>
            <option value="t3" data-display="3rd" disabled>Third item</option>
            <option value="t4" data-display="4th">Fourth item</option>
        </select>
        <div id="demoText"></div>

        <script type="text/javascript">
            Event.observe($("selectDemo"), "change", function(event) {
                items = event.values;
                var str = "items: "+items.join(",");
                $("demoText").update(str);
            });
            new SelectMultiple($("selectDemo"), {
                defaultText: "Select something",
                defaultOption: "0",
                optionValueField: "data-display",
                defaultValue: ["2"],
                hoverDisabledCallback: function(event) {
                    $("demoText").setStyle({
                        color: "blue"
                    });
                }
            });
        </script>
    </body>
</html>