Remove initial selected item in jQuery ASM select

Question

Hello,

I am using the rather fantastic jQuery multiple select plugin, ASM select

This plugin is so close to my needs I have to try and fix the one and only bug I can find.

On initial load, the selector checks for any elements that have the attribute "selected" and selects them. This is good, except when nothing has the attribute "selected" it chooses the first one.

How can I stop it from doing this? I don't want anything initially selected as 9/10 times it is going to be the wrong option.

I am no jQuery coder and have looked through the code and have found several references to building the first select item and have fiddled with them, but have not had any success.

I don't usually do this but seeing as I have absolutely no idea where to start, here is the code for the plugin.

/*
 * Alternate Select Multiple (asmSelect) 1.0.4a beta - jQuery Plugin
 * http://www.ryancramer.com/projects/asmselect/
 * 
 * Copyright (c) 2009 by Ryan Cramer - http://www.ryancramer.com
 * 
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 */

(function($) {

    $.fn.asmSelect = function(customOptions) {

        var options = {

            listType: 'ol',                     // Ordered list 'ol', or unordered list 'ul'
            sortable: false,                    // Should the list be sortable?
            highlight: false,                   // Use the highlight feature? 
            animate: false,                     // Animate the the adding/removing of items in the list?
            addItemTarget: 'bottom',                // Where to place new selected items in list: top or bottom
            hideWhenAdded: false,                   // Hide the option when added to the list? works only in FF
            debugMode: false,                   // Debug mode keeps original select visible 

            removeLabel: 'remove',                  // Text used in the "remove" link
            highlightAddedLabel: 'Added: ',             // Text that precedes highlight of added item
            highlightRemovedLabel: 'Removed: ',         // Text that precedes highlight of removed item

            containerClass: 'asmContainer',             // Class for container that wraps this widget
            selectClass: 'asmSelect',               // Class for the newly created <select>
            optionDisabledClass: 'asmOptionDisabled',       // Class for items that are already selected / disabled
            listClass: 'asmList',                   // Class for the list ($ol)
            listSortableClass: 'asmListSortable',           // Another class given to the list when it is sortable
            listItemClass: 'asmListItem',               // Class for the <li> list items
            listItemLabelClass: 'asmListItemLabel',         // Class for the label text that appears in list items
            removeClass: 'asmListItemRemove',           // Class given to the "remove" link
            highlightClass: 'asmHighlight'              // Class given to the highlight <span>

            };

        $.extend(options, customOptions); 

        return this.each(function(index) {

            var $original = $(this);                // the original select multiple
            var $container;                     // a container that is wrapped around our widget
            var $select;                        // the new select we have created
            var $ol;                        // the list that we are manipulating
            var buildingSelect = false;                 // is the new select being constructed right now?
            var ieClick = false;                    // in IE, has a click event occurred? ignore if not
            var ignoreOriginalChangeEvent = false;          // originalChangeEvent bypassed when this is true

            function init() {

                // initialize the alternate select multiple

                // this loop ensures uniqueness, in case of existing asmSelects placed by ajax (1.0.3)
                while($("#" + options.containerClass + index).size() > 0) index++; 

                $select = $("<select></select>")
                    .addClass(options.selectClass)
                    .attr('name', options.selectClass + index)
                    .attr('id', options.selectClass + index); 

                $selectRemoved = $("<select></select>"); 

                $ol = $("<" + options.listType + "></" + options.listType + ">")
                    .addClass(options.listClass)
                    .attr('id', options.listClass + index); 

                $container = $("<div></div>")
                    .addClass(options.containerClass) 
                    .attr('id', options.containerClass + index); 

                buildSelect();

                $select.change(selectChangeEvent)
                    .click(selectClickEvent); 

                $original.change(originalChangeEvent)
                    .wrap($container).before($select).before($ol);

                if(options.sortable) makeSortable();

                if($.browser.msie && $.browser.version < 8) $ol.css('display', 'inline-block'); // Thanks Matthew Hutton
            }

            function makeSortable() {

                // make any items in the selected list sortable
                // requires jQuery UI sortables, draggables, droppables

                $ol.sortable({
                    items: 'li.' + options.listItemClass,
                    handle: '.' + options.listItemLabelClass,
                    axis: 'y',
                    update: function(e, data) {

                        var updatedOptionId;

                        $(this).children("li").each(function(n) {

                            $option = $('#' + $(this).attr('rel')); 

                            if($(this).is(".ui-sortable-helper")) {
                                updatedOptionId = $option.attr('id'); 
                                return;
                            }

                            $original.append($option); 
                        }); 

                        if(updatedOptionId) triggerOriginalChange(updatedOptionId, 'sort'); 
                    }

                }).addClass(options.listSortableClass); 
            }

            function selectChangeEvent(e) {

                // an item has been selected on the regular select we created
                // check to make sure it's not an IE screwup, and add it to the list

                if($.browser.msie && $.browser.version < 7 && !ieClick) return;
                var id = $(this).children("option:selected").slice(0,1).attr('rel'); 
                addListItem(id);    
                ieClick = false; 
                triggerOriginalChange(id, 'add'); // for use by user-defined callbacks
            }

            function selectClickEvent() {

                // IE6 lets you scroll around in a select without it being pulled down
                // making sure a click preceded the change() event reduces the chance
                // if unintended items being added. there may be a better solution?

                ieClick = true; 
            }

            function originalChangeEvent(e) {

                // select or option change event manually triggered
                // on the original <select multiple>, so rebuild ours

                if(ignoreOriginalChangeEvent) {
                    ignoreOriginalChangeEvent = false; 
                    return; 
                }

                $select.empty();
                $ol.empty();
                buildSelect();

                // opera has an issue where it needs a force redraw, otherwise
                // the items won't appear until something else forces a redraw
                if($.browser.opera) $ol.hide().fadeIn("fast");
            }

            function buildSelect() {

                // build or rebuild the new select that the user
                // will select items from

                buildingSelect = true; 

                // add a first option to be the home option / default selectLabel
                $select.prepend("<option>" + $original.attr('title') + "</option>"); 

                $original.children("option").each(function(n) {

                    var $t = $(this); 
                    var id; 

                    if(!$t.attr('id')) $t.attr('id', 'asm' + index + 'option' + n); 
                    id = $t.attr('id'); 

                    if($t.is(":selected")) {
                        addListItem(id); 
                        addSelectOption(id, true);                      
                    } else {
                        addSelectOption(id); 
                    }
                });

                if(!options.debugMode) $original.hide(); // IE6 requires this on every buildSelect()
                selectFirstItem();
                buildingSelect = false; 
            }

            function addSelectOption(optionId, disabled) {

                // add an <option> to the <select>
                // used only by buildSelect()

                if(disabled == undefined) var disabled = false; 

                var $O = $('#' + optionId); 
                var $option = $("<option>" + $O.text() + "</option>")
                    .val($O.val())
                    .attr('rel', optionId);

                if(disabled) disableSelectOption($option); 

                $select.append($option); 
            }

            function selectFirstItem() {

                // select the firm item from the regular select that we created

                $select.children(":eq(0)").attr("selected", true); 
            }

            function disableSelectOption($option) {

                // make an option disabled, indicating that it's already been selected
                // because safari is the only browser that makes disabled items look 'disabled'
                // we apply a class that reproduces the disabled look in other browsers

                $option.addClass(options.optionDisabledClass)
                    .attr("selected", false)
                    .attr("disabled", true);

                if(options.hideWhenAdded) $option.hide();
                if($.browser.msie) $select.hide().show(); // this forces IE to update display
            }

            function enableSelectOption($option) {

                // given an already disabled select option, enable it

                $option.removeClass(options.optionDisabledClass)
                    .attr("disabled", false);

                if(options.hideWhenAdded) $option.show();
                if($.browser.msie) $select.hide().show(); // this forces IE to update display
            }

            function addListItem(optionId) {

                // add a new item to the html list

                var $O = $('#' + optionId); 

                if(!$O) return; // this is the first item, selectLabel

                var $removeLink = $("<a></a>")
                    .attr("href", "#")
                    .addClass(options.removeClass)
                    .prepend(options.removeLabel)
                    .click(function() { 
                        dropListItem($(this).parent('li').attr('rel')); 
                        return false; 
                    }); 

                var $itemLabel = $("<span></span>")
                    .addClass(options.listItemLabelClass)
                    .html($O.html()); 

                var $item = $("<li></li>")
                    .attr('rel', optionId)
                    .addClass(options.listItemClass)
                    .append($itemLabel)
                    .append($removeLink)
                    .hide();

                if(!buildingSelect) {
                    if($O.is(":selected")) return; // already have it
                    $O.attr('selected', true); 
                }

                if(options.addItemTarget == 'top' && !buildingSelect) {
                    $ol.prepend($item); 
                    if(options.sortable) $original.prepend($O); 
                } else {
                    $ol.append($item); 
                    if(options.sortable) $original.append($O); 
                }

                addListItemShow($item); 

                disableSelectOption($("[rel=" + optionId + "]", $select));

                if(!buildingSelect) {
                    setHighlight($item, options.highlightAddedLabel); 
                    selectFirstItem();
                    if(options.sortable) $ol.sortable("refresh");   
                }

            }

            function addListItemShow($item) {

                // reveal the currently hidden item with optional animation
                // used only by addListItem()

                if(options.animate && !buildingSelect) {
                    $item.animate({
                        opacity: "show",
                        height: "show"
                    }, 100, "swing", function() { 
                        $item.animate({
                            height: "+=2px"
                        }, 50, "swing", function() {
                            $item.animate({
                                height: "-=2px"
                            }, 25, "swing"); 
                        }); 
                    }); 
                } else {
                    $item.show();
                }
            }

            function dropListItem(optionId, highlightItem) {

                // remove an item from the html list

                if(highlightItem == undefined) var highlightItem = true; 
                var $O = $('#' + optionId); 

                $O.attr('selected', false); 
                $item = $ol.children("li[rel=" + optionId + "]");

                dropListItemHide($item); 
                enableSelectOption($("[rel=" + optionId + "]", options.removeWhenAdded ? $selectRemoved : $select));

                if(highlightItem) setHighlight($item, options.highlightRemovedLabel); 

                triggerOriginalChange(optionId, 'drop'); 

            }

            function dropListItemHide($item) {

                // remove the currently visible item with optional animation
                // used only by dropListItem()

                if(options.animate && !buildingSelect) {

                    $prevItem = $item.prev("li");

                    $item.animate({
                        opacity: "hide",
                        height: "hide"
                    }, 100, "linear", function() {
                        $prevItem.animate({
                            height: "-=2px"
                        }, 50, "swing", function() {
                            $prevItem.animate({
                                height: "+=2px"
                            }, 100, "swing"); 
                        }); 
                        $item.remove(); 
                    }); 

                } else {
                    $item.remove(); 
                }
            }

            function setHighlight($item, label) {

                // set the contents of the highlight area that appears
                // directly after the <select> single
                // fade it in quickly, then fade it out

                if(!options.highlight) return; 

                $select.next("#" + options.highlightClass + index).remove();

                var $highlight = $("<span></span>")
                    .hide()
                    .addClass(options.highlightClass)
                    .attr('id', options.highlightClass + index)
                    .html(label + $item.children("." + options.listItemLabelClass).slice(0,1).text()); 

                $select.after($highlight); 

                $highlight.fadeIn("fast", function() {
                    setTimeout(function() { $highlight.fadeOut("slow"); }, 50); 
                }); 
            }

            function triggerOriginalChange(optionId, type) {

                // trigger a change event on the original select multiple
                // so that other scripts can pick them up

                ignoreOriginalChangeEvent = true; 
                $option = $("#" + optionId); 

                $original.trigger('change', [{
                    'option': $option,
                    'value': $option.val(),
                    'id': optionId,
                    'item': $ol.children("[rel=" + optionId + "]"),
                    'type': type
                }]); 
            }

            init();
        });
    };

})(jQuery); 

I hope someone has a solution to this problem.

Tim

Answer 1

It seems that this plugin is not at fault but rather the operator... me

<select multiple name="options[]" id="optionsSelect">

Failing to specify the multiple attribute causes ASM select to simply treat the select box as a normal select box which of course always has an option selected.

Doh.

I think its time for bed.