Javascript不适用于表单下拉选择

Question

我有一堆似乎没有应用的jQuery。 它的目的是允许我设置HTML表单下拉菜单的样式。

HTML

<select id="selectbox">
    <option value="text">...</option>
</select>

jQuery的

jQuery(document).ready(function ($) {
    $('select').each(function () {

      var $this = $(this),
          numberOfOptions = $(this).children('option').length;

      $this.addClass('s-hidden');

      $this.wrap('<div class="select"></div>');

      $this.after('<div class="styledSelect"></div>');

      var $styledSelect = $this.next('div.styledSelect');

      $styledSelect.text($this.children('option').eq(0).text());

      var $list = $('<ul />', {
          'class': 'options'
      }).insertAfter($styledSelect);

      for (var i = 0; i < numberOfOptions; i++) {
          $('<li />', {
              text: $this.children('option').eq(i).text(),
              rel: $this.children('option').eq(i).val()
          }).appendTo($list);
      }

      var $listItems = $list.children('li');

      $styledSelect.click(function (e) {
          e.stopPropagation();
          $('div.styledSelect.active').each(function () {
              $(this).removeClass('active').next('ul.options').hide();
          });
          $(this).toggleClass('active').next('ul.options').toggle();
      });

      $listItems.click(function (e) {
          e.stopPropagation();
          $styledSelect.text($(this).text()).removeClass('active');
          $this.val($(this).attr('rel'));
          $list.hide();
      });

      $(document).click(function () {
          $styledSelect.removeClass('active');
          $list.hide();
      });
  });
});

基本上，下拉选项的显示方式与标准浏览器设置相同，而与以前功能正常的样式选择不一样。