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);

@ShaneStebner do you use this plugin just for replacing an ul with a select tag? — Ram
– Ram, Commented Jul 17, 2012 at 20:05
The plugin hides the select boxes and creates a new fancy looking one. It is supposed to manipulate the hidden original one and allow it to still be sent with the form. — HTMLGuy
– HTMLGuy, Commented Jul 17, 2012 at 20:06

Probocop · Accepted Answer · 2013-08-28 09:22:09Z

2

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.

answered Aug 28, 2013 at 9:22

Probocop

10.6k28 gold badges90 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HTMLGuy Over a year ago

I have no idea if this works since I built this site 8 months ago, but I'll accept your question for future viewers anyway.

HTMLGuy · Accepted Answer · 2012-07-17 20:36:41Z

0

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

answered Jul 17, 2012 at 20:36

HTMLGuy

2413 silver badges17 bronze badges

1 Comment

HTMLGuy Over a year ago

Even with the update, it's still not removing previous selected='selected'. So if you select a bunch, they all have that when you're done. I need to get rid of that.

gowtham · Accepted Answer · 2012-12-08 07:06:03Z

0

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 .

answered Dec 8, 2012 at 7:06

gowtham

1

Collectives™ on Stack Overflow

jQuery selectbox issue

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related