title: jQuery selectbox issue
body: <p>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. </p>
  
  <pre><code>&lt;div id="sbHolder_3628646" class="sbHolder"&gt;&lt;a id="sbToggle_3628646" href="#" class="sbToggle"&gt;&lt;/a&gt;
   &lt;a id="sbSelector_3628646"
      href="#" class="sbSelector"&gt;Electronics&lt;/a&gt;
  
      &lt;ul id="sbOptions_3628646" class="sbOptions"
      style="top: 30px; max-height: 260px; display: none; "&gt;
          &lt;li&gt;&lt;a href="# " rel=" "&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#1" rel="1"&gt;Electronics&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#2" rel="2"&gt;Tvs&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#3" rel="3"&gt;Plasma&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#4" rel="4"&gt;LED&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here's the code it's generating it from</p>
  
  <pre><code>&lt;select name="cat2" class="longinput" id="drop2" sb="3628646" style="display: none; "&gt;
      &lt;option value=" "&gt;&lt;/option&gt;
      &lt;option value="1"&gt;Electronics&lt;/option&gt;
      &lt;option value="2"&gt;Tvs&lt;/option&gt;
      &lt;option value="3"&gt;Plasma&lt;/option&gt;
      &lt;option value="4"&gt;LED&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>jQuery from selectbox</p>
  
  <pre><code>(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("&lt;div&gt;", {
              "id": "sbHolder_" + inst.uid,
              "class": inst.settings.classHolder
          });
  
          sbSelector = jQuery("&lt;a&gt;", {
              "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("&lt;a&gt;", {
              "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("&lt;ul&gt;", {
              "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("&lt;li&gt;");
                  jQuery("&lt;span&gt;", {
                      "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] &amp;&amp; arguments[1].sub ? true : false,
                  disabled = arguments[1] &amp;&amp; arguments[1].disabled ? true : false;
              arguments[0].each(function (i) {
                  var that = jQuery(this),
                      li = jQuery("&lt;li&gt;"),
                      child;
                  if (that.is(":selected")) {
                      sbSelector.text(that.text());
                      s = TRUE;
                  }
                  if (i === olen - 1) {
                      li.addClass("last");
                  }
                  if (!that.is(":disabled") &amp;&amp; !disabled) {
                      child = jQuery("&lt;a&gt;", {
                          "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("&lt;span&gt;", {
                          "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' &amp;&amp; options == 'isDisabled') {
          return jQuery.selectbox['_' + options + 'Selectbox'].apply(jQuery.selectbox, [this[0]].concat(otherArgs));
      }
  
      if (options == 'option' &amp;&amp; arguments.length == 2 &amp;&amp; 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);
  </code></pre>