jQuery selectbox issue

Question

I'm adding a dropdown and using .selectbox("attach") to convert it to selectbox. The options beyond the second (beyond electronics, it's letting me select electronics) aren't allowing me to select them. Here's the code that's generated by the attach command.

<div id="sbHolder_3628646" class="sbHolder"><a id="sbToggle_3628646" href="#" class="sbToggle"></a>
 <a id="sbSelector_3628646"
    href="#" class="sbSelector">Electronics</a>

    <ul id="sbOptions_3628646" class="sbOptions"
    style="top: 30px; max-height: 260px; display: none; ">
        <li><a href="# " rel=" "></a>
        </li>
        <li><a href="#1" rel="1">Electronics</a>
        </li>
        <li><a href="#2" rel="2">Tvs</a>
        </li>
        <li><a href="#3" rel="3">Plasma</a>
        </li>
        <li><a href="#4" rel="4">LED</a>
        </li>
    </ul>
</div>

here's the code it's generating it from

<select name="cat2" class="longinput" id="drop2" sb="3628646" style="display: none; ">
    <option value=" "></option>
    <option value="1">Electronics</option>
    <option value="2">Tvs</option>
    <option value="3">Plasma</option>
    <option value="4">LED</option>
</select>

jQuery from selectbox

(function (jQuery, undefined) {
var PROP_NAME = 'selectbox',
    FALSE = false,
    TRUE = true;
/**
 * Selectbox manager.
 * Use the singleton instance of this class, jQuery.selectbox, to interact with the select box.
 * Settings for (groups of) select boxes are maintained in an instance object,
 * allowing multiple different settings on the same page
 */
function Selectbox() {
    this._state = [];
    this._defaults = { // Global defaults for all the select box instances
        classHolder: "sbHolder",
        classHolderDisabled: "sbHolderDisabled",
        classSelector: "sbSelector",
        classOptions: "sbOptions",
        classGroup: "sbGroup",
        classSub: "sbSub",
        classDisabled: "sbDisabled",
        classToggleOpen: "sbToggleOpen",
        classToggle: "sbToggle",
        speed: 200,
        effect: "slide", // "slide" or "fade"
        onChange: null, //Define a callback function when the selectbox is changed
        onOpen: null, //Define a callback function when the selectbox is open
        onClose: null //Define a callback function when the selectbox is closed
    };
}

jQuery.extend(Selectbox.prototype, {
    /**
     * Is the first field in a jQuery collection open as a selectbox
     * 
     * @param {Object} target
     * @return {Boolean}
     */
    _isOpenSelectbox: function (target) {
        if (!target) {
            return FALSE;
        }
        var inst = this._getInst(target);
        return inst.isOpen;
    },
    /**
     * Is the first field in a jQuery collection disabled as a selectbox
     * 
     * @param {HTMLElement} target
     * @return {Boolean}
     */
    _isDisabledSelectbox: function (target) {
        if (!target) {
            return FALSE;
        }
        var inst = this._getInst(target);
        return inst.isDisabled;
    },
    /**
     * Attach the select box to a jQuery selection.
     * 
     * @param {HTMLElement} target
     * @param {Object} settings
     */
    _attachSelectbox: function (target, settings) {
        if (this._getInst(target)) {
            return FALSE;
        }
        var jQuerytarget = jQuery(target),
            self = this,
            inst = self._newInst(jQuerytarget),
            sbHolder, sbSelector, sbToggle, sbOptions,
            s = FALSE, optGroup = jQuerytarget.find("optgroup"), opts = jQuerytarget.find("option"), olen = opts.length;

        jQuerytarget.attr("sb", inst.uid);

        jQuery.extend(inst.settings, self._defaults, settings);
        self._state[inst.uid] = FALSE;
        jQuerytarget.hide();

        function closeOthers() {
            var key, uid = this.attr("id").split("_")[1];
            for (key in self._state) {
                if (key !== uid) {
                    if (self._state.hasOwnProperty(key)) {
                        if (jQuery(":input[sb='" + key + "']")[0]) {
                            self._closeSelectbox(jQuery(":input[sb='" + key + "']")[0]);
                        }
                    }
                }
            }
        }

        sbHolder = jQuery("<div>", {
            "id": "sbHolder_" + inst.uid,
            "class": inst.settings.classHolder
        });

        sbSelector = jQuery("<a>", {
            "id": "sbSelector_" + inst.uid,
            "href": "#",
            "class": inst.settings.classSelector,
            "click": function (e) {
                e.preventDefault();
                closeOthers.apply(jQuery(this), []);
                var uid = jQuery(this).attr("id").split("_")[1];
                if (self._state[uid]) {
                    self._closeSelectbox(target);
                } else {
                    self._openSelectbox(target);
                }
            }
        });

        sbToggle = jQuery("<a>", {
            "id": "sbToggle_" + inst.uid,
            "href": "#",
            "class": inst.settings.classToggle,
            "click": function (e) {
                e.preventDefault();
                closeOthers.apply(jQuery(this), []);
                var uid = jQuery(this).attr("id").split("_")[1];
                if (self._state[uid]) {
                    self._closeSelectbox(target);
                } else {
                    self._openSelectbox(target);
                }
            }
        });
        sbToggle.appendTo(sbHolder);

        sbOptions = jQuery("<ul>", {
            "id": "sbOptions_" + inst.uid,
            "class": inst.settings.classOptions,
            "css": {
                "display": "none"
            }
        });

        jQuerytarget.children().each(function(i) {
            var that = jQuery(this), li, config = {};
            if (that.is("option")) {
                getOptions(that);
            } else if (that.is("optgroup")) {
                li = jQuery("<li>");
                jQuery("<span>", {
                    "text": that.attr("label")
                }).addClass(inst.settings.classGroup).appendTo(li);
                li.appendTo(sbOptions);
                if (that.is(":disabled")) {
                    config.disabled = true;
                }
                config.sub = true;
                getOptions(that.find("option"), config);
            }
        });

        function getOptions () {
            var sub = arguments[1] && arguments[1].sub ? true : false,
                disabled = arguments[1] && arguments[1].disabled ? true : false;
            arguments[0].each(function (i) {
                var that = jQuery(this),
                    li = jQuery("<li>"),
                    child;
                if (that.is(":selected")) {
                    sbSelector.text(that.text());
                    s = TRUE;
                }
                if (i === olen - 1) {
                    li.addClass("last");
                }
                if (!that.is(":disabled") && !disabled) {
                    child = jQuery("<a>", {
                        "href": "#" + that.val(),
                        "rel": that.val(), 
                        "text": that.text(),
                        "click": function (e) {
                            e.preventDefault();
                            var t = sbToggle,
                                uid = t.attr("id").split("_")[1];
                            self._changeSelectbox(target, jQuery(this).attr("rel"), jQuery(this).text());
                            self._closeSelectbox(target);
                        }
                    });
                    if (sub) {
                        child.addClass(inst.settings.classSub);
                    }
                    child.appendTo(li);
                } else {
                    child = jQuery("<span>", {
                        "text": that.text()
                    }).addClass(inst.settings.classDisabled);
                    if (sub) {
                        child.addClass(inst.settings.classSub);
                    }
                    child.appendTo(li);
                }
                li.appendTo(sbOptions);
            });
        }

        if (!s) {
            sbSelector.text(opts.first().text());
        }

        jQuery.data(target, PROP_NAME, inst);

        sbSelector.appendTo(sbHolder);
        sbOptions.appendTo(sbHolder);           
        sbHolder.insertAfter(jQuerytarget);
    },
    /**
     * Remove the selectbox functionality completely. This will return the element back to its pre-init state.
     * 
     * @param {HTMLElement} target
     */
    _detachSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst) {
            return FALSE;
        }
        jQuery("#sbHolder_" + inst.uid).remove();
        jQuery.data(target, PROP_NAME, null);
        jQuery(target).show();          
    },
    /**
     * Change selected attribute of the selectbox.
     * 
     * @param {HTMLElement} target
     * @param {String} value
     * @param {String} text
     */
    _changeSelectbox: function (target, value, text) {
        var inst = this._getInst(target),
            onChange = this._get(inst, 'onChange');
        jQuery("#sbSelector_" + inst.uid).text(text);
        jQuery(target).find("option[value='" + value + "']").attr("selected", TRUE);
        if (onChange) {
            onChange.apply((inst.input ? inst.input[0] : null), [value, inst]);
        } else if (inst.input) {
            inst.input.trigger('change');
        }
    },
    /**
     * Enable the selectbox.
     * 
     * @param {HTMLElement} target
     */
    _enableSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst || !inst.isDisabled) {
            return FALSE;
        }
        jQuery("#sbHolder_" + inst.uid).removeClass(inst.settings.classHolderDisabled);
        inst.isDisabled = FALSE;
        jQuery.data(target, PROP_NAME, inst);
    },
    /**
     * Disable the selectbox.
     * 
     * @param {HTMLElement} target
     */
    _disableSelectbox: function (target) {
        var inst = this._getInst(target);
        if (!inst || inst.isDisabled) {
            return FALSE;
        }
        jQuery("#sbHolder_" + inst.uid).addClass(inst.settings.classHolderDisabled);
        inst.isDisabled = TRUE;
        jQuery.data(target, PROP_NAME, inst);
    },
    /**
     * Get or set any selectbox option. If no value is specified, will act as a getter.
     * 
     * @param {HTMLElement} target
     * @param {String} name
     * @param {Object} value
     */
    _optionSelectbox: function (target, name, value) {
        var inst = this._getInst(target);
        if (!inst) {
            return FALSE;
        }
        //TODO check name
        inst[name] = value;
        jQuery.data(target, PROP_NAME, inst);
    },
    /**
     * Call up attached selectbox
     * 
     * @param {HTMLElement} target
     */
    _openSelectbox: function (target) {
        var inst = this._getInst(target);
        //if (!inst || this._state[inst.uid] || inst.isDisabled) {
        if (!inst || inst.isOpen || inst.isDisabled) {
            return;
        }
        var el = jQuery("#sbOptions_" + inst.uid),
            viewportHeight = parseInt(jQuery(window).height(), 10),
            offset = jQuery("#sbHolder_" + inst.uid).offset(),
            scrollTop = jQuery(window).scrollTop(),
            height = el.prev().height(),
            diff = viewportHeight - (offset.top - scrollTop) - height / 2,
            onOpen = this._get(inst, 'onOpen');
        el.css({
            "top": height + "px",
            "maxHeight": (diff - height) + "px"
        });
        inst.settings.effect === "fade" ? el.fadeIn(inst.settings.speed) : el.slideDown(inst.settings.speed);
        jQuery("#sbToggle_" + inst.uid).addClass(inst.settings.classToggleOpen);
        this._state[inst.uid] = TRUE;
        inst.isOpen = TRUE;
        if (onOpen) {
            onOpen.apply((inst.input ? inst.input[0] : null), [inst]);
        }
        jQuery.data(target, PROP_NAME, inst);
    },
    /**
     * Close opened selectbox
     * 
     * @param {HTMLElement} target
     */
    _closeSelectbox: function (target) {
        var inst = this._getInst(target);
        //if (!inst || !this._state[inst.uid]) {
        if (!inst || !inst.isOpen) {
            return;
        }
        var onClose = this._get(inst, 'onClose');
        inst.settings.effect === "fade" ? jQuery("#sbOptions_" + inst.uid).fadeOut(inst.settings.speed) : jQuery("#sbOptions_" + inst.uid).slideUp(inst.settings.speed);
        jQuery("#sbToggle_" + inst.uid).removeClass(inst.settings.classToggleOpen);
        this._state[inst.uid] = FALSE;
        inst.isOpen = FALSE;
        if (onClose) {
            onClose.apply((inst.input ? inst.input[0] : null), [inst]);
        }
        jQuery.data(target, PROP_NAME, inst);
    },
    /**
     * Create a new instance object
     * 
     * @param {HTMLElement} target
     * @return {Object}
     */
    _newInst: function(target) {
        var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\\\jQuery1');
        return {
            id: id, 
            input: target, 
            uid: Math.floor(Math.random() * 99999999),
            isOpen: FALSE,
            isDisabled: FALSE,
            settings: {}
        }; 
    },
    /**
     * Retrieve the instance data for the target control.
     * 
     * @param {HTMLElement} target
     * @return {Object} - the associated instance data
     * @throws error if a jQuery problem getting data
     */
    _getInst: function(target) {
        try {
            return jQuery.data(target, PROP_NAME);
        }
        catch (err) {
            throw 'Missing instance data for this selectbox';
        }
    },
    /**
     * Get a setting value, defaulting if necessary
     * 
     * @param {Object} inst
     * @param {String} name
     * @return {Mixed}
     */
    _get: function(inst, name) {
        return inst.settings[name] !== undefined ? inst.settings[name] : this._defaults[name];
    }
});

/**
 * Invoke the selectbox functionality.
 * 
 * @param {Object|String} options
 * @return {Object}
 */
jQuery.fn.selectbox = function (options) {

    var otherArgs = Array.prototype.slice.call(arguments, 1);
    if (typeof options == 'string' && options == 'isDisabled') {
        return jQuery.selectbox['_' + options + 'Selectbox'].apply(jQuery.selectbox, [this[0]].concat(otherArgs));
    }

    if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') {
        return jQuery.selectbox['_' + options + 'Selectbox'].apply(jQuery.selectbox, [this[0]].concat(otherArgs));
    }

    return this.each(function() {
        typeof options == 'string' ?
            jQuery.selectbox['_' + options + 'Selectbox'].apply(jQuery.selectbox, [this].concat(otherArgs)) :
            jQuery.selectbox._attachSelectbox(this, options);
    });
};

jQuery.selectbox = new Selectbox(); // singleton instance
jQuery.selectbox.version = "0.1.3";
})(jQuery);

Answer 1

I ran into the same problem, and just added a line to the _changeSelectbox() function.

Around line 345 there should be the following line:

$(target).find("option[value='" + value + "']").attr("selected", TRUE);

Directly before this I added the following:

$(target).find("option").attr("selected", FALSE);

So when it fires the _changeSelectbox() function and sets the selected attribute, it removes any existing selected attributes first.

Answer 2

create one div or span assign the id name key at this same time create anyone popup give id name key_con, when you click key pop up will show. once again you click the key popup will hide .

Answer 3

They rolled out an update which fixed this error! http://www.bulgaria-web-developers.com/projects/javascript/selectbox/