我有一堆似乎没有应用的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();
      });
  });
});

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

  ask by Camille Roney translate from so

本文未有回复,本站智能推荐:

1回复

在动态选择上运行Pretty Dropdown

我为下拉菜单使用了Pretty Dropdowns( https://www.npmjs.com/package/pretty-dropdowns ),并且我有一个允许用户在表中添加行的表单。 他们添加的行还包含下拉菜单,但是我需要Pretty Dropdowns才能再次运行,以便可以将其应用
1回复

下拉列表有4个相同的选项

我在网上发现了这个修改过的脚本。 它具有4个posiblities的下拉选择菜单非常有效。 这里的问题。 如果菜单与墨西哥相同(墨西哥城市和墨西哥国家),它将无法正常工作。 我怎么能纠正这个? 感谢帮助! var categories = []; // li
1回复

选择下拉值在更改后消失

我有这个代码 function OnSelectedIndexChange() { if (stsNikahWp == "2") { document.getElementById("kdNegaraSuami").options.length = 0; $("#kdNegaraSua
2回复

Select2下拉菜单多次选择和取消选择

我有一个带有2个选项代码的select2下拉列表: 这个javascript调用的select2 : 我想实现以下效果:单击所有选项然后删除其他选项,如果选择了其他选项,则从选择中删除所有选项。 我已经试过这段代码: 但是更改事件未触发,是否有其他可能跟踪selec
1回复

选择下拉列表值为空时的警报消息

我有4个下拉菜单选项,其中每个下拉菜单均取决于其他下拉菜单。 下拉列表B的值取决于下拉列表A,因此默认情况下,所有下拉列表的值都将设置为无。 如果下拉列表A的选定值为空,并且下拉列表B被选择,则应显示一条警报消息。 如何使用jQuery实现此目的? 到目前为止,我有这个.
1回复

简单的jquery / javascript下拉菜单,具有2个输出(1个img,1个标题)

请原谅我我自学成才,缺少很多知识> < 我找到了一些代码(可能是从Stockoverflow的你们这里来的!),并设法使其在我的网站上工作。 我只需要对jquery进行1次更改,但是当我这样做时它不起作用。 这是未更改的版本 (下拉列表是我正在处理的内容) 的HT
2回复

如果使用 jquery 在页面加载时未选择任何选项,如何禁用下拉菜单?

我有很多下拉菜单的表格。 如果在表单加载时未选择任何选项,我想禁用下拉列表。 我试过了,它禁用了所有下拉菜单。 我想在使用 jquery 的表单加载时仅禁用空值下拉列表
2回复

重新加载时下拉选择重新加载到第一个选项

您好,我在选择下拉菜单时遇到问题。 我正在尝试存储该值,但它不起作用。 我已经看过其他问题,但没有运气。 这是一个小提琴: function selectCss(element) { const a = element.options[element.selectedIndex].