Question

我有一个多重选择like the following。

但我现在需要的是将其显示为普通的“下拉”选项，因为我的网站上有很多正常的选择，如果选择大小超过1的话，看起来很奇怪。

因此，多重选择也应look like here。

我不想包含额外的jQuery插件或其他内容。我寻找一个简单的html / css / js解决方案。

Answer 1

你要求的是根本不可能。目标外观是Web浏览器呈现的选择框。您根本无法修改多重选择以相同的方式呈现。用户如何选择多个项目？

出于可用性原因，我强烈建议查看其他解决方案。多个选项确实很难让用户理解。远更有用的解决方案是使用一组复选框。

或WebAIM states it：

建议避免使用多个选择菜单。并非所有浏览器都为多个选择菜单提供直观的键盘导航许多用户不知道使用CTRL / Command或Shift +单击来选择多个项目。通常，一组复选框选项可以提供类似但更易于访问的功能。

有关可用性和多重选择的更多信息，请参阅：

话虽如此，有多个库可以创建自定义体验，例如https://github.com/bsara/multi-select-dropdown.js（无依赖性）

Answer 2

我做了一个快速课程（纯JavaScript），应该按照你的意愿行事。您可能希望添加更多功能。

编辑：更新了代码，忘了你想要一个下拉列表

https://jsfiddle.net/xLtfsgbd/1/

 ( function()
{

  var MultipleSelectDropDown = function() 
  {
   // constructor
  }

  MultipleSelectDropDown.prototype =
  {
    options: [],
    selected: [],
    size: 0,
    displayed: false,

    add: function(element)
    {
      this.options.push(element);
      this.size = this.size + 1;
    },

    remove: function(element)
    {
      for(var stored in this.options)
      {
        if(this.options[stored] == element)
        {
          this.options.splice(stored, 1);
          this.size = this.size - 1;
          break;
        }
      }
    },

    render: function(onIdSelector)
    {
      var container = document.getElementById(onIdSelector);
      if(typeof container == 'undefined')
      {
        window.alert('The list container is undefined!')
        return;
      }

      var mainDiv = document.createElement('div');
      mainDiv.setAttribute('style', 'width:300px; height: 50px display:block;');
      var firstItem = document.createElement('div');
      firstItem.setAttribute('style', 'width:250px; height:25px;');
      firstItem.appendChild(document.createTextNode(this.options[0]));
      var dropDownArrow = document.createElement('img');
      dropDownArrow.setAttribute('src', 'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-128.png');
      dropDownArrow.setAttribute('style', 'width:25px; height:25px;');

      _self = this;
      dropDownArrow.onclick = function(e)
      {
          if(_self.displayed)
          {
                _self.displayed = false;
              var displayedList = document.getElementById('daList');
              document.body.removeChild(displayedList);
          }
          else
          {
                var rect = this.getBoundingClientRect();
            _self.renderList(rect.left, rect.top);
                        _self.displayed = true;
          }
      };

      firstItem.appendChild(dropDownArrow);

      mainDiv.appendChild(firstItem);
      //mainDiv.appendChild(dropDownArrow);
      container.appendChild(mainDiv);
    },

    renderList: function(x, y)
    {
        var div = document.createElement('div');
      div.setAttribute('id', 'daList');
      div.setAttribute('style', 'positon:absolute; top:'+y+'; left:'+x+'; height:100px; width:200px; overflow-y:scroll; background-color:#fff;');
        var list = document.createElement('ul');

      var _self = this;
      for(var stored in this.options)
      {
        var option = this.options[stored];
        var listItem = document.createElement('li');
        listItem.setAttribute('index', stored);
        listItem.appendChild(document.createTextNode(option));

        listItem.onclick = function(e)
        {
          var index = this.getAttribute('index');
          if(index < 0 || index > _self.size)
          {
            return;
          }

          var selected = this.getAttribute('selected');
          // Item not selected
          if(selected == null || selected == '' || selected == 'false')
          {
            this.setAttribute('selected', 'true');
            this.setAttribute('style', 'background-color:#0099ff;');
            selected.push(option);
          }
          else // Item selected
          {
            this.setAttribute('selected', 'false');
            this.setAttribute('style', 'background-color:#fff;');

            for(var sel in _self.selected)
            {
                if(_self.selected[sel] == option)
                {
                  _self.selected.splice(sel, 1);
                }
            }
          }
        };

        list.appendChild(listItem);
      }

      div.appendChild(list);
      document.body.appendChild(div);
    }
  }
  SelectDrop = MultipleSelectDropDown;
})();

显示多个选择作为正常选择

2 个答案: